Stretch Section CSS

Hello all,

I have a problem displaying an image in full width of the Page.
I have created a home page (using Elementor) with an image in one row.
As you can see in the screenshot(cssStretching.png), I have set the Stretch Section CSS setting to “Stretch Section and Content”. In the preview in Elementor the image is also displayed correctly. As soon as I call the page normally I see only a white page with the header. Only after a bit of scrolling the complete page is loaded, then the image is also displayed on the full size of the page.
I have attached a link with our website. Here you can have a look at the problem.

Can you help me with this?

Thanks and greetings

Attachments:

You must be logged in to view attached files.

Hello,

Please, provide your site admin access (insert the site credentials into the Private content block under the message area)

Best Regards

Hello,
I have provided them with the data in the Private Content

Hello,

You need to set this image as the section background: https://gyazo.com/d50353c3ba516a2bfca9fd362c61986b

Try to do that and let me know if it is not what you wanted. In this case describe in more details your purpose.

Best Regards

Hello,

sorry for the late response.
The image is now pulled to full size, so far that is good.
However, the image is no longer responsive but is cut off as soon as the screen gets smaller. This is not ideal.

Is there another solution for this?

Best regards

Hello,

You need to create for mobile square proportional images and set by means of widget option: https://prnt.sc/1s3psep

If you have any questions please feel free to contact us.

Best Regards

hello,

The problem is when I set the image as a background it doesn’t adjust when I shrink the browser. It is simply cut off on one side.

Please look at the difference.
1. if the image is not set as background of the row, but as image in the row. Reduce the size of the browser a bit (scroll down a bit first so that the page loads properly). The image adjusts itself. After a certain size other images have to be set.

2. if the image is set as background. Downsize the browser a bit The image does not adapt, but it is cut off -> The behavior is wrong.

I think the problem is that the page does not load correctly when the CSS stretch is applied and the image is set as image.

Please help me with this.
Thank you and best regards

Hello,

This is the nature of the image, you can try any other theme and even another builder and you will see the same.

The only way out is to to create for mobile square proportional images and set by means of widget option: https://prnt.sc/1s3psep

If you have any questions please feel free to contact us.

Best Regards

Hello,

we have found a solution that works for us.

Thank you and best regards

You are welcome! We are here to help.

Wish you a wonderful day!

[Author]

Posts