Home › Forums › Support › GeneratePress Flexbox structure conflicting with LiteSpeed Cache CSS caching
- This topic has 7 replies, 2 voices, and was last updated 3 years, 2 months ago by David.
-
AuthorPosts
-
January 14, 2021 at 1:55 am #1618111Gerard
I use GeneratePress and LiteSpeed Cache in all my clients’ websites. Recently I’ve changed the GeneratePress’ structure from Floats to Flexbox, and this is messing with LiteSpeed’s “Generate Critical CSS” option, making the .grid-container for the #page include horizontal paddings, and thus making my Elementor pages not be able to use the full screen width.
This doesn’t happen with the Floats structure.
January 14, 2021 at 4:49 am #1618254DavidStaffCustomer SupportHi there,
does the issue go away if you disable the Litespeed cache?
January 14, 2021 at 7:52 am #1618684GerardHi David,
Yes it does, just by not activating that option, but it’s quite necessary.
January 14, 2021 at 8:12 am #1618706DavidStaffCustomer SupportThis really comes down to how LiteSpeeds servers are determining what is Critical and what is not. The issue is more likely related to the CSS required to set the elementor content width being deferred. If the themes container is set to flexbox before that happens then content will simply fill the min space it can.
Unless Litespeed support can assist with determining what is being loaded later then is necessary , and can adjust that, then the simple option is to stick with Floats.
January 15, 2021 at 5:20 am #1619830GerardHi David, thanks for your response.
This is the CSS affecting the #page when the LSCache option is turned on or off:
/* Critical CSS ON */ .grid-container { margin-left: auto; margin-right: auto; max-width: 1200px; } .grid-container { margin-left: auto; margin-right: auto; max-width: 1200px; padding-left: 10px; padding-right: 10px; }
/* Critical CSS OFF */ .grid-container { margin-left: auto; margin-right: auto; max-width: 1200px; }
I understand that it can be something that GeneratePress cannot do anything about it, so my question will be the following:
Is there any option in the GeneratePress customizer to adjust those paddings for the .grid-container?
Thanks!
January 15, 2021 at 7:56 am #1620190DavidStaffCustomer SupportCan you share a link to the site without Critical CSS or any CSS Optimizations enabled so i can take a look?
January 16, 2021 at 1:52 am #1620982GerardHi David,
I’ve attached the URL to you.
Flexbox is activated and all CSS optimizations disabled at this time.
January 16, 2021 at 7:49 am #1621405DavidStaffCustomer SupportWith the Critical CSS off i cannot see this CSS being output anywhere in the site:
.grid-container { margin-left: auto; margin-right: auto; max-width: 1200px; padding-left: 10px; padding-right: 10px; }
But i am not sure that is the issue. Its more likely related to the late loading of the elementor content width thats the issue. I would suggest speaking with the LiteSpeed support…. or as i said just use Floats.
-
AuthorPosts
- You must be logged in to reply to this topic.