[Resolved] Some elements are not full width on first page load

[Krempel & Co. Werbeagentur]

Hello!

I have this issue where some content that should be full width is not rendered in full width the first time the page is loaded. After I resize the window it get’s updated and is correctly displayed on full width.

I had this issue with slider revolution and Carousel Everything for WPBakery (https://de.wordpress.org/plugins/carousel-anything/). I first thought it was a Carousel Everything-Issue but now i run into the same problem while using Slider Revolution.

My guess is that while the page is loading, and the plugins want to get the width of the page a wrong width is given to the plugin because it is not loaded fully and therefore a wrong size is displayed. That would explain why after the page loaded and the width is updated everything gets updated correctly.

Is it possible this has something to do with GP?

regards!
Maurice

[Leo]

Hi there,

Can you make sure that you are using the full width in the content container option?
https://docs.generatepress.com/article/content-container/

Let me know 🙂

[Krempel & Co. Werbeagentur]

Hello Leo!

thanks for getting back to me, that would in fact work, but since we don’t want to have our full page in full width (we just want some elements, like headers, sliders, … to be full width) that is sadly not an option. I tried “contain” too, but still there is this issue with it not being full width unless i resize the window.

Is it possible to resolve this so we can use “full width (without padding)”-WP-Bakery-Elements in full width and having the rest of the content in normal width?

By the way, the normal full width elements element from WP Bakery works well and like it should. I just could observe this behavior with the mentioned slider-elements.

regards
Maurice

[David]

Hi there,

the best method is to do what Leo said and set the Content Container to Full Width.
You can then use the Page Builder to create Sections/Rows that have a Contained width where required.

Currently, WP Bakery is using Javascript to calculate the necessary container width of every full width section, which in turn writes inline CSS styles to adjust their size and position. Which aside from being a performance hog is the root cause of the issue with the Slider, as its calculating its sizes based on the initial container load size.

[Krempel & Co. Werbeagentur]

Hey David,

thanks for explaining!
I’ll have a look into your suggestion.

Thanks to Leo too for the help 🙂

[David]

You’re welcome

[Author]

Posts