Design difficulties

Hi there,

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

Sorry! Check the new data, please.

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.

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.

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

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;
}

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

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.