Layout shift Caused By class="x-container max width offset"

[PineappleVinyl]

Hi Everyone. I am trying to reduce layout shift on mobile and pagespeed insights is telling me it’s caused by <div class=“x-container max width offset”
Any ideas on what I can change to get rid of layout shift or what it is I have to adjust?
I don’t know code

[christian]

Hey Victor,

Before anything else, please test an empty page without header and footer first just to be sure the header and footer are out of the way. If you’re not sure how to do that, you need to change the Page Template to Blank No Container | No Header No Footer. If result is good or there is no layout shift, the problem is most probably in content.

Next, add in some content and test again. If there’s a layout shift, try setting all the Gap Width and Gap Height of single column Rows to 0.

If the result is good, though unlikely, the issue could be in the Header and/or Footer so activate the Header next by switching the page template to Blank No Container | Header No Footer and run the page speed test again.

If the result of that is bad, try removing the modal and dropdown elements in the header and run the test again. If the result is good then the said elements are the culprit. They are currently being investigated as they are known to cause a momentary double-scrollbar so there’s a bit of a layout shift because of that.

If the result is good, the issue could be in the Footer so activate the footer by using the Blank No Container | Header Footer page template. Next, set all footer bars’ height to auto because if the footer content goes taller than the footer bar height, it’s known to cause double-scrollbar issue also.

Using that troubleshooting guide, you can pinpoint where the issue is coming from. If the suggestions above doesn’t help, please at-least tell us whether the issue is coming from the content, header or footer.

Thanks.