Find a better way to make the lsx-full-width section full width

[viscosho]

Describe the bug The Google Search Console is showing an error saying “Content wider than screen” for the Google Mobile Friendly test, the reason this error occurs is because lsx uses these type of clases to make full width sections inside the main content to be full width:

.content-area .lsx-full-width-base, .content-area .lsx-full-width-base-small, .content-area .lsx-full-width, .content-area .lsx-full-width-alt {
    margin: 0 -9999rem;
    padding: 8.5rem 9999rem;
}

There should be a better way to achieve these full sections.

To Reproduce This will happen to any div or section that sues the clases .lsx-full-width-base, .lsx-full-width-base-small, lsx-full-width or .lsx-full-width-alt, which happens a lot in all our extensions and themes.

Here is one of our clients live sites giving the error: https://search.google.com/test/mobile-friendly?id=8N-HKFa7flAdhZxA0nmZjg

Expected behaviour The sections using these classes should still be full width content inside the main container.

Screenshots

Full width section from TO

Desktop Happening in all browsers

Mobile Happening in device

[viscosho]

This has has been created with the purpose if fixing this issue: https://github.com/lightspeeddevelopment/lsx/tree/mobile-fix-content-wider-than-screen

[viscosho]

This has been fixed and tested in this commit: https://github.com/lightspeeddevelopment/lsx/commit/d8562c4dc3523fa76fde845429e6517cc4734bfa