[Support request] Space on Homepage Top Bar

[Ella]

Hi there,

I’m just trying to neaten up my site. On desktop my site looks fine, but on mobile, there is a big space below the logo / page title and the menu bar. You can see it here: https://www.totallypurrfect.com and on any blog posts that you click on, it remains the same.

Can you tell me how I fix this please? Without it affecting desktop? I just want to get rid of that gap.

Thanks,
Ella

[David]

Hi there,

the header widget has bottom margin on it, so you need to hide that and not its contents.
Try adding this CSS to do that:

@media (max-width: 768px) {
    .site-header .header-widget {
        display: none;
    }
}

[Ella]

Thanks for getting back to me. I’ve added this and purged the cache but it doesn’t seem to have done anything. Can you check what you see your end please? Thanks!

[Fernando]

It’s working from my end.

Try adding /?nocache at the end of your URL to see.

It’s a plugin or server caching issue.

[Ella]

But does that mean the only way to see it is by having that at the end (which most people actually won’t have?) How do I determine what’s causing this and stop it from continuing to happen? As I won’t know how many people see it properly and how many see it how I do. I have the same theme on my main blog: http://www.forgettingfairytales.com and it doesn’t do it on there.

[David]

Try changing the CSS i provided to this:

@media (max-width: 768px) {
    .site-header .header-widget {
        display: none !important;
    }
}

Then clear any caches.

[Author]

Posts