[Resolved] Limiting width of stretched images on large viewports

Home Forums Support Limiting width of stretched images on large viewports

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1285188
    Stephen

    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

    #1285324
    David
    Staff
    Customer Support

    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/

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.