Archived topic
Limiting width of stretched images on large viewports
1 reply · Started by Stephen on May 15, 2020
Hello,
I've noticed that on monitors that are 24" and above, my homepage doesn't look great because the hero image continues to stretch to to fill the screen. I have purposefully set it to fill the screen on Elementor because on screens up to 22" it looks really nice. I'm wondering if there is a bit of CSS that will stop it from stretching when it reaches a certain viewport size (ie. on 24" monitors)?
Thank you in advance for your help.
https://www.cleardesign.studio/
Stephen
Hi there,
the only thing you can do is to limit the width of the container.
Most of your sites content is limited to the 1800px Container width.
However your first section breaks out of that because that Elementor section is set to Stretch Section. This uses Javascript to force it to fill the screen regardless of what container width you impose.
The only solution, to the best of my knowledge, is NOT to use the Stretch Section option.
Increase the Container Width to accommodate the maximum full width section you want.
For those non full width sections you can set their content width in Elementor.
The Layout Element allows you to change content width for individual pages:
https://docs.generatepress.com/article/layout-element-overview/
