Topic: Responsive Container

honzapecenka
June 2, 2023 at 12:18 pm

Hi, how I can set a responsive container with image background. When I set a fixed height, the image is cropped from the sides. I need height and width to be responsive. Now I have the height set to 100%.
https://prnt.sc/09rCyJOZa2O4
When I insert a block image it works fine. Unfortunately I need a container.
Thanks for help.
Ying
June 2, 2023 at 3:07 pm

Hi there,

When I set a fixed height, the image is cropped from the sides.

What was the fixed height value you set? Can you try 170px?
Let me know 🙂
honzapecenka
June 2, 2023 at 9:29 pm

I had it set height 100%. When I set the height or min-height to 170px, my image gets cropped when I change the resolution.
David
June 3, 2023 at 4:24 am
Hi there,

select the Container Block with the background image.
In Advanced > Additional CSS classes add a custom class eg. fixed-aspect

then add this CSS:
```
.fixed-aspect {
    aspect-ratio: 16 / 9;
    width: 100%;
}
```
Adjust the aspect ratio to suit your needs.
honzapecenka
June 3, 2023 at 5:22 am

Amazing. It works. Thank you David.
David
June 3, 2023 at 5:29 am

Glad to hear that!

Viewing 6 posts - 1 through 6 (of 6 total)

Responsive Container