[Resolved] Mobile sidebar move to top CSS is causing CLS issues in Core Web Vitals

Home Forums Support [Resolved] Mobile sidebar move to top CSS is causing CLS issues in Core Web Vitals

Home Forums Support Mobile sidebar move to top CSS is causing CLS issues in Core Web Vitals

  • This topic has 8 replies, 2 voices, and was last updated 6 months ago by David.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #2295755


    I am following the steps on https://generatepress.com/forums/topic/move-sidebar-position-on-mobile/#post-2295529

    This CSS tweak is causing CLS issues in Pagespeed.dev and I’m wondering if there is perhaps a quick solution for this?

    I tried adding the CSS as high up as I could but it still flashes the main content first

    See 2 screenshots:

    Your help would be highly appreciated


    I think Fernando posted this in the wrong section

    Hi Eugene,

    As your Filtering plugin/section loads, it extends the space it occupies. In result, putting it above your page on mobile pushes down everything as it loads.

    Aside from caching, you can probably try adding a min-height to your left side bar on mobile to reduce the CLS or the way it pushes down all other content as it loads.


    (min-height: 768px){
    div#left-sidebar {
    min-height: 1400px;

    Customer Support

    Hi there,

    did Fernandos suggestion work for you ?


    No, it didn’t work. The reason I think is because the theme outputs the Content followed by the Sidebar, and only then the “reverse” CSS is applied. So the code doesn’t work because when the page is loaded, the left-sidebar isn’t at the top yet, causing the CLS issue.

    I found a very hacky way of getting around it though. Instead of setting the sidebar min-height, I added a massive margin-top:100vh; on #primary:

    /* Left Sidebar on top on mobile */
    @media (max-width: 768px) {
      /* Combat the CLS. See *.js line 179 */
      #primary {
      .left-sidebar .site-content {
          display: flex;
          flex-direction: column-reverse;

    Then I am setting the initial margin-top with JS once the page has loaded:

    // Combat the CLS issue. Set CSS to offset the switch.
    // See stlye.css line XXX
    window.addEventListener('load', function () {
        const content = document.getElementById('primary');
        content.style.marginTop = 'initial';    

    Please let me know if you are in agreement with this code?

    Customer Support

    An alternative option would be to Hook the Filters in above the main_content using a Block Element. You can then use CSS to hide them on desktop, and hide the sidebar on mobile.

    In theory, as long as those widgets are not resizing they will be the first thing to load on mobile….

    Its CSS hacky instead of JS hacky 🙂 lol


    Hi There David

    Hope you are well

    I realised now that the CLS score on desktop is also being affected and I did some digging.

    I realised that no matter what I try, the sidebar is still being loaded after the content and then re-ordered with CSS. As a result, it seems like the void in which the sidebar can’t be fixed no matter what CSS I add. I’ve disabled all my own CSS apart from the shadow to demonstrate the shift in my gif.

    This is avoidable on Mobile, but not really on Desktop i found.

    Is this a known issue?

    See screenshots and recording:
    Screenshot: https://prnt.sc/eSy81U3dbgZM
    Recording: https://drive.google.com/drive/folders/14l8A6wql58wHkVjind1dyroJEiY_Npdp

    Customer Support

    Can you share a link to that page ?


    Hi David

    Posted in the private information

    Customer Support

    Try adding this to your CSS:

    @media(min-width: 769px) {
        #primary {
            margin-left: auto;

    As long as your optimizations don’t mess with the CSS loading order, that should keep the main content content pushed to the right.

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