[Support request] Image Look / Ratio

[Johann]

Hi David,

I’ve checked yesterday and the most of images have a different ratio (height/width)

The weird thing ? Some images with the same ratio have got a different aspect / look / visual on the page…

E.G.

Attack Image looks big (ratio = 56%)
Combat Image looks big (ratio = 56%)
Pump Image looks good (despite a different ratio = 62%)
Jam Image looks good (ratio = 56%)
Balance Image looks good (ratio = 56%)
RPM Image looks too big (ratio = 100%)

[Fernando]

Can you try this CSS for the aspect-ratio-aclass?:

.aspect-ratio-a {
    aspect-ratio: 9/9;
    width: 100%;
    height: auto !important;
}

[Johann]

It worked like a charm, images have a good ratio on all devices! Thanks 🙂

The only thing for now is “that white space” in between some grids…like if vertical gaps would have been set…but that’s not the case…

Again if you have an idea that would be great ^^

[Fernando]

Are you referring to this for instance?: https://share.getcloudapp.com/yAuQ7k8L

That whitespace is because the text beside the image goes beyond the height of the image.

You can try reducing the font-size or spacing to prevent this.

Basically, try to make sure the height of the text beside the image is less than the image’s height.

[Johann]

I did a little bit of both, thanks for all !

Just a final one : what would be the CSS code in case I want to modify “in the same place” the text container padding (those ones beside the image’s containers) ?

Let’s say I want to add a left and a right padding of 20px for each text container…

I played with the below CSS code you previously gave me but I’m forced to admit I didn’t manage it working (my bad ^_^’)

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

[Fernando]

To clarify, are you referring to the texts beside the image?

I believe those are inside a Container Block. You can add padding to the container block if so.

[Johann]

Hi there,

Yes absolutely !

Is it not possible to do the job only once with CSS + Additionnal CSS tag on blocks ?

[Fernando]

That’s possible too if that’s what you prefer. You can add class my-container to the class list of the Container Blocks for instance. Then, add this CSS:

.my-container > .gb-inside-container {
    padding: 100px;
}

You can modify the padding CSS rule to your preference.

[Author]

Posts