[Resolved] Design difficulties

[Leonardo]

Hello how are you?

I’m trying to achieve a design I made using Figma, but I got to a part that I can’t adjust… Could any of you guys give me any ideas? The difficulty is in leaving the images “cropped”, as I did in Figma. Send more information in private.

Note: increase and decrease the size of the browser screen to get an idea of ​​how it is working…

Leonardo M.

[David]

Hi there,

the login you provided is not recognised – can you resupply ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Leonardo]

Sorry! Check the new data, please.

[David]

Ooh, thats fun 🙂

Ok, so select the top Container with the mono background image. And in Advanced > Additional CSS Class(es) add:

fixed-aspect

then add this CSS:

.fixed-aspect {
    aspect-ratio: 1512 / 794;
}

That will force the container block to maintain the aspect ratio which i set to width / height of the background image.
That should help.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Leonardo]

Thank you, David!

I made a small change, because opening it on my ultrawide monitor I need to increase its adjustment a little bit.

The only thing I would like would be to have the texts all automatically centered vertically.

The one in the black and white photo, for example, is always on top.

[Leonardo]

Just look at this print I took on my monitor:

https://germinlab.com.br/wp-content/uploads/2022/09/imagem_2022-09-05_151257271.png

[Fernando]

Hi Leonardo,

You can try adding this CSS as well:

.gb-container.fixed-aspect > .gb-inside-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
}

.gb-container.fixed-aspect {
    position:relative;
}

[Leonardo]

It worked, Ferdinand!

However, I wanted to reduce the size of the black and white image a little and then the effect was lost…

.fixed-aspect {
aspect ratio: 1512 / 520;
}

Remembering that the desired effect is this: https://germinlab.com.br/wp-content/uploads/2022/09/Sem-titulo.png

[Fernando]

How about something like:

.fixed-aspect {
    aspect-ratio: 1512 / 524;
    background-position:bottom center !important;
}

You can also set the background position in the GB Block settings instead of through code.

[Author]

Posts