Site doesn't display properly on mobile devices

  • Hi there – my site https://www.bibliophone.com doesn’t display properly on mobile devices. It’s a twenty thirteen theme and I have adapted the menu bar so that the two categories are centralised. I’m wondering if this is what’s caused the problem. But as you’ll see, on a full screen it looks fine, but when shrunk, the menu squashes up and covers the header logo. Is there a way I can fix this?
    Thank you!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter paulmc911

    (@paulmc911)

    Can anybody out there please help with this? It’s driving me out of my mind!

    Hi @paulmc911,

    Hope you’re well today! ??

    Without digging to see how the menu bar was centered, I was able to get the header to display better on mobile with this:

    @media (max-width: 767px){
  #masthead.site-header .home-link { min-height: 100px;}
  #masthead.site-header .navbar { width: 40%;}
}

    That’s just a quick adjustment though, perhaps it’ll suffice?

    Cheers,
    David

    Thread Starter paulmc911

    (@paulmc911)

    Hey David

    Thanks once again for your time! Ok I put this code into Snippets but I’ve not seen any difference on my mobile (I haven’t yet looked at it on an ipad though). On my phone it still displays with the menu right in the middle – and obscuring – the header image.

    Have I applied it properly (using the code snippets plug in) or should I put the code somewhere else?

    Thanks again

    Paul

    It should go in your child theme CSS file (style.css) – but you should have ONLY modifications in that file, not a copy of the entire parent theme CSS file. Doing that makes it MUCH harder to track what changes you have made and creates duplicate code – which can slow down your site.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Site doesn't display properly on mobile devices’ is closed to new replies.