[Support request] GeneratePress Flexbox structure conflicting with LiteSpeed Cache CSS caching

Home Forums Support [Support request] GeneratePress Flexbox structure conflicting with LiteSpeed Cache CSS caching

Home Forums Support GeneratePress Flexbox structure conflicting with LiteSpeed Cache CSS caching

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1618111
    Gerard

    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.

    #1618254
    David
    Staff
    Customer Support

    Hi there,

    does the issue go away if you disable the Litespeed cache?

    #1618684
    Gerard

    Hi David,

    Yes it does, just by not activating that option, but it’s quite necessary.

    #1618706
    David
    Staff
    Customer Support

    This 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.

    #1619830
    Gerard

    Hi 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!

    #1620190
    David
    Staff
    Customer Support

    Can you share a link to the site without Critical CSS or any CSS Optimizations enabled so i can take a look?

    #1620982
    Gerard

    Hi David,

    I’ve attached the URL to you.

    Flexbox is activated and all CSS optimizations disabled at this time.

    #1621405
    David
    Staff
    Customer Support

    With 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.

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.