Loading glitch for full-width stretched sections

An addition – to remove padding that may be left behind:

#content {
padding : 0px!important;
}

Hello everyone ?? The whole thing is called flickers / FOUC. This is because the stretching is done with JS and not with CSS. Elementor pushes the code into the footer, so this style is only loaded at the end. Incredible that Elementor has not yet been able to solve this. The selection (stretch with CSS and not with JS) would be desirable! You can of course solve this manually, as described: https://docs.elementor.com/article/249-embedded-template-css-loading
Or with a plugin that JS loads asynchronously. Use the Woodmart theme !! They got it right by adding a feature to stretch with CSS. Or even simpler, use a preloader that was designed just for such things ??

• This reply was modified 4 years, 2 months ago by kobler.

@kobler Thank you for providing some further clarity on this issue.

This has been driving me nuts for months trying to figure out why this is happening to my homepage. I installed a preloader to hide it, but this is not ideal.

In the link you provided it says change ‘ $template_id = 123456 ‘ to the ID of my template. Does this mean my page id?

My homepage has the site ID of ‘3’ so would this literally look like:

$template_id = 3

?

I’m still learning all this stuff so apologies if this sounds like a silly question!

Also – one would imagine if this is a known issue then Elementor would have found an easy, user friendly workaround for this by now!

Kind regards,

Tim

Hello timmy321,
That’s not a stupid question ?? I don’t know everything either and I always have to read it. No it’s not the page ID. You have to create a template with Elementor: https://www.awesomescreenshot.com/video/1279386?key=bbcbe171a250230333d5804b2de43e0a

In the template you create the entire page, or just a section that you want to stretch. In the normal Elementor editor you can then insert the template again:

For me, however, this only works with the Pro version of Elementor.

The simplest is the Woodmart theme! They reprogrammed this function from JS to CSS routes!

The second way is to make a side animation of 0.01 seconds delay. (Fade in)

• This reply was modified 4 years, 1 month ago by kobler.

Hi all,

This is how I was able to solve the issue for myself:
https://youtu.be/LylMlbS8sS4

Hope this will help.

All the best.

Hi both,

Many thanks for the above! It worked! I had months of messing about to get that to work ??

Kind regards to you both,

Tim

Hi @timmy321

Glad to hear that. Best wishes.

I encountered this problem before and found a solution.
1. Make sure that you are set to full width on Elementor page layout.
2. On the WP dashboard, go to your page and click on Edit.
3. On the right side, you will see page attributes.
4. Change the Template dropdown to Full width.
5. After all that go to the page and turn of the stretch option Off

I hope this can Solve the problem of all.
contact me If you did not understand how to do this.
[email protected]

@jedp621 Thanks a lot!

Hi guys,

I had this fixed for months, so I avoided the new Elementor update as updating it always seems to make this issue reappear again.

Elementor then automatically updated for some reason and low and behold, I have the same issue again! Only this time, none of the above works to fix it.

Come on Elementor! What gives? This is getting really old now.

Does anyone have a different solution?

Kind regards,

Tim

@grapa cheers! It works and looks much prettier than before in fact.