Support » Theme: Twenty Twenty-One » Posts have big space after header on mobile

  • thesadshow

    (@thesadshow)


    I have everything set the way I want it, but posts have a big empty space between the bottom of the header and the top of the content.

    I’ve used the options plugin to remove all of the “padding” from the bottom of the header and also from the top of the content. I also removed the title and the featured image from the post. When I look at my post on a desktop it looks perfect, but when I look at the same post on a mobile device there’s a big empty space.

    I’ve replicated this issue on two different mobile devices. Also, I’m aware that I’m using a review plugin to make a graph but I wanted to clarify that this plugin is not causing the empty space because the issue was there prior to installing and using this plugin.

    Can you please look at my post on a mobile device and tell me what I have to do to make the big empty space between the bottom of the header and the top of the content look the same as it does on a desktop?

    Thanks

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Oliver Campion

    (@domainsupport)

    Try adding these one by one to “Customizer – Additional CSS” to see which one helps …

    .site-main > article > .entry-content {
    margin-top: 0;
    }
    
    #review-statistics .review-wrap-up {
    margin-top: 0;
    }
    
    .single .entry-header {
    display: none;
    }

    Oliver

    Thread Starter thesadshow

    (@thesadshow)

    The third one worked.

    However, when I tried the first one it somehow created extra space above the header on mobile screens. Then when I deleted it and saved the changes, the extra space above the header remained. Even after flushing the cache on my website and delete cookies, cache etc. on my mobile device, the new extra space above the header still remains.

    I tried to remove it with the options plugin, but the plugin only removes the space on larger screens which is the opposite of what I need. On larger screens the space above the header is fine, it’s only on a mobile device where there is extra space added above the header.

    It’s frustrating how the spacing on mobile screens is different than the spacing on other screen sizes, with no way to change it specifically on mobile screens. If the spacing is going to be different on different screen sizes, the ability to change the spacing independently should exist.

    Thread Starter thesadshow

    (@thesadshow)

    The extra space that has now been created above the header on mobile devices also exists on the homepage and every other page as well. Unlike the original problem of extra spacing below the header on mobile screens, which only existed on posts.

    Thread Starter thesadshow

    (@thesadshow)

    When I turn the mobile device sideways, the new extra space above the header is gone and everything looks fine. It’s only there when the mobile screen is in the vertical position. Which is also weird because the original problem of too much space under the header existed in both screen positions on a mobile device.

    Oliver Campion

    (@domainsupport)

    Hello,

    The padding you mention is required on sites that have a primary menu for the header to have depth. This was fixed on the last update which is why you have just noticed it.

    We will add an option to remove this padding on mobile devices for sites that don’t have a primary menu (like yours) but in the meantime, this will remove it for you …

    .site-header {
    padding-top: 0;
    }

    Please be aware that the theme’s mobile breakpoint is very small (481px) so it’s likely that when you turn your device sideways, the theme thinks it is being viewed on a larger device.

    Hope that helps explain things.

    Oliver

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Posts have big space after header on mobile’ is closed to new replies.