[Support request] Image Look / Ratio

[Johann]

Hi there,

Finalizing a client’s site and facing image ratio issues…

It looks good on desktop but tablet and mobile versions are not ok. Attached you will see the different lookings I’ve got…

What is your best recommendation to have the perfect image ratio / looking for each format pls ?

https://ibb.co/V2pWk2c (desktop version)
https://ibb.co/ZTrJwPC (ipad air version)
https://ibb.co/s1wQ9HC (iphone 12 pro version)

[David]

Hi there,

can i see that page ?

[Johann]

You should have a temporary access to the site

Page concerned = Main Page

[David]

Its not easy to main aspect ratios of a background image of a container when

a) the container does not fill 100% width of the viewport
b) the container has content inside which may affect its height
c) when the container is in a Row and the neighbouring column also affects its height.

Options:

A. For mobile when the Container fits the width of the viewport

1. Calculate the Aspect Ratio of the background image. Width / Height * 100 = Aspect Ratio
2. Set the Container Blocks Minimum Height to your aspect ratio value and select the VW units.

B. Force any Container block to have a fixed Aspect Ratiio

1. Select the Container Block and give it an Advanced > Additional CSS Class of aspect-ratio-a
2. Add this CSS:

.aspect-ratio-a {
    aspect-ratio: 9 / 16;
}

Adjust aspect-ratio: 9 / 16; to match your images

[Johann]

Thanks David

I tried the 2nd option and I noticed multiple aspects such as :

1) On the mobile version, I can’t see anymore the text which is on the front of the image’s container…

Is there any way to set the text on the bottom left of the container ?

2) 2 pictures out of +/-10, where I set the aspect-ratio, became quite big only on the desktop version despite having the expected ratio…any idea why ?

https://i.ibb.co/j3MRWXL/image-ratio-desktop.jpg
https://i.ibb.co/b612tp2/image-ratio-tablet.jpg
https://i.ibb.co/XCjpsm6/missing-text-mobile.jpg

[Fernando]

Hi Johann,

Can you re-share temporary access to the site? The one shared previously isn’t working anymore.

[Johann]

Hi Fernando,

Here you are

[Fernando]

I can’t seem to locate the page that contains the screenshots. Which page should I look at to see them?

Is the site provided correct? It seems different.

[Johann]

Hi again,

Indeed that was not the correct website, my mistake…

Please go on the main page of the provided URL

[Fernando]

I see. You can try removing the top margin of the first Headline block, then place all Headline Blocks for the image text within another Container Block.

We’ll position the text through custom CSS so the don’t disappear.

[Johann]

I removed the top margin of the 1st headline block and added all headline blocks (text description) within a new container block as you recommend

What is the custom CSS you were talking about 🙂 ?

[Johann]

BTW have you noticed the issue I’m facing with a couple of images in the “Cours” session ?

Let me explain…after adding the “aspect-ratio-a” advanced code, two pictures became bigger and are now overlaying with the beside container…

[Fernando]

The top margin of the first Headline Blocks is still there, viewing your page. Once you’ve removed them, add this CSS:

.gb-container.aspect-ratio-a > .gb-inside-container {
    position: relative;
    height: 100%;
}

.gb-container.aspect-ratio-a > .gb-inside-container > .gb-container {
    position: absolute;
    bottom: 20px;
}

Other headlines are not in a Container Block yet still as well.

[Johann]

Hi again

I only amended the first section out of the dozen when I replied to you…

It’s now done with all the sections and that’s cool, I’ve got the text in front of the image !

Before adding the aspect-ratio-a code, my content and pictures were perfectly in alignment but not anymore…how to avoid container overlapping and having a nice looking ?

Some pictures are correctly aligned but not all of them…have a look to my shared video link attached on the private information field

[David]

Do ALL your original Images have the same Aspect Ratio ?

[Author]

Posts