WPBakery; Stretch row and content (no paddings)

Hi there,

After updating my theme, rows that are set to “Stretch row and content (no paddings)” load in an ugly way which is annoying; The problem is the row is not fully stretched while the page is loading, and only after the loading is completed the row fills the whole width. It was not like this. How can I solve it?

Please find the attached and try to open this page: tennis.com/shop to see the problem.

Regards,

Attachments:

You must be logged in to view attached files.

Hi,

We checked your page http://tennisfa.com/shop and did not notice any indents while loading. Please, try to clear your browser cache and check again.

Regards

I have purged the cache already. This problem mostly happens when you load the page for the first time. When the page is cached and loads faster you don’t see it. Try hard-refreshing the page multiple times in a row and you will see it.

Regards

OK, I found the issue.

In the previous version, we had this:

.rtl .vc_row[data-vc-full-width], .rtl section[data-vc-full-width] {left: auto;
right: calc((-100vw - -95vw)/ 2);}

While in the new version web have this:

.rtl .vc_row[data-vc-full-width], .rtl section[data-vc-full-width] {
left: calc((-100vw - -95vw)/ 2)}

I overrode it in the child theme CSS file and now it seems to be working like before. I don’t know why you had changed it though.

Regards,

We have changed that code because of WPBakery RTL Columns gap issue that was present in the previous version. You didn’t notice it because you didn’t use such options on your site.

Last custom code that you added to your site make your full-width row broken on large desktop devices. https://gyazo.com/ae70c61eb45f622a201def8fa341ec88 https://gyazo.com/e24b2bb98e01c0dffad389cb4965521c

Apparently, your original problem was present only on small screens devices. We tested your site on the small screen and found your initial issue with loading glitch.

Please, first remove your previous custom code and then add the following custom code to your Custom CSS for desktop and Custom CSS for tablet areas https://gyazo.com/f9b95946fe3441d108c7f7507df866dd

body.rtl .vc_row[data-vc-full-width], 
body.rtl section[data-vc-full-width] {
    left: calc((100vw - 95vw)/ 2);
}

Sorry for the misunderstanding
Regards

Thanks for the help. Problem solved.

Great, you are welcome.

[Author]

Posts