Stretch Section Issue

[leejay123]

Im having some problems with the Woodmart Theme.

I have created a HTML block for the footer and set It like this https://gyazo.com/9a090230d381d5fd4aa2ef1ef02e5285

I have also created many more pages with the Elementor page builder and regardless of the page If I use the [Xtemos] Layout and select, ” Stretch Section,” – see here https://gyazo.com/664dcbbda63f76367dc87c6a6250f420 I aways have overlapping Issues on the page within landscape Mode on Mobile while using the Firefox browser on mobile devices such as Iphone but If i’m using any other browser on mobile while In landscape mode there Is no issues.

Within the Elementor page builder If i go to Section/layout – [Xtemos] Layout and select, ” Stretch Section,” I have noticed that within Firefox that the section overlaps the page on Landscape Mode on mobile. – I have attached a file called, “Issue Firefox,”
However If you test on Chrome Landscape Mode on mobile or any other browser It works completely fine.

This is quite frustrating.
This is not a third party plugin Issue.
Prior to this topic I cloned my website and deactivated all plugins except Woodmart plugins but the Issue still there!
If i create a and page and stretch sections the text, images etc overlaps if using firefox Landscape!!!!

I have attached 2 images
One called Firefox Issue
One called works on chrome

• This topic was modified 1 year, 3 months ago by leejay123.
• This topic was modified 1 year, 3 months ago by leejay123.

Attachments:

You must be logged in to view attached files.

Hello,

I see that you use the “Full width” option from Elementor (https://prnt.sc/DbGuFqnumjcG) and the “Section stretch CSS” functionality from our theme at the same time. Unfortunately, it could cause some issues if you use these functionalities at the same time, you can read the description of our option where mentioned that you can enable it instead of Elementor’s feature: https://prnt.sc/zKwOO_6fF5gk , so please disable the “Full width” functionality from Elementor, clear all caches and recheck the issue on your mobile device.

Kind Regards

Okay, Im now working on the custom footer HMTL Block that overlaps on Firefox.
These are the settings I have In place already https://gyazo.com/988d0c6ebc874ec8f3978cdc9d0a7dd4
The Issue still there In firefox?

Hello,

I have checked the footer in Firefox on the mobile device, and it looks well, here is a screenshot: https://prnt.sc/NpfUqv7U6HYI

So please explain how can I replicate that issue on my side.

Kind Regards

I think Its based on the Iphone Device,

I have tested this on a second device while using Firefox landscape mode, on the Samsung Note 9 and it works completely fine with no Issue!!!

Im using the Iphone 14 pro Max.
As mentioned, this is only in landscape mode.
See attached screenshot on Iphone 14 pro Max landscape mode.

Attachments:

You must be logged in to view attached files.

Hello,

After we looked into the situation, we found that the issue is related directly to the browser Firefox because as you can see in the below screenshot, the default theme has the same issue, the footer is cut from both sides.

https://prnt.sc/sIel6MkZ0lf4

So it is not something caused by our theme.

Kind Regards

Then why does woodmart demos not have the same issue when In landscape on Firefox browser?

[Luke Nielsen]

Hello,

Please add the below code in Theme Settings -. Custom CSS -> Global Custom CSS area to disable the stretch section option on mobile forcefully.

@media (max-width: 1024px) {
.elementor-section[class*="wd-section-stretch"] {
	position: static;
	min-width: unset;
	width: unset;
}
}

After that, you may have to readjust the side paddings on the stretch sections on the mobile.

Kind Regards

• This reply was modified 1 year ago by Luke Nielsen.

[Author]

Posts