Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Resolved] #mobile-header displaying wider than screen

Home Forums Support [Resolved] #mobile-header displaying wider than screen

Home Forums Support #mobile-header displaying wider than screen

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #587026
    Kyle Thomas

    I’m having an issue with the mobile-header displaying wider than the screen size on mobile devices.

    If I lower the below from 100%!important to 97% it disappears but that isn’t an ideal solution. I just can’t find where the problem is being caused.


    @media
    (max-width: 768px)
    #mobile-header {
    display: block!important;
    opacity: 1;
    width: 100%!important;

    #587040
    David
    Staff
    Customer Support

    Hi Kyle,

    it is because of this CSS – padding effects the size of the container:

    .mobile-header-navigation {
        padding: 5px;
    }

    You can fix it by using this instead:

    .mobile-header-navigation {
        padding: 5px;
        box-sizing: border-box;
    }
    #587216
    Kyle Thomas

    That is it. Many thanks. Using a GeneratePress Library site for the first time, missed that custom css line 😉

    #587345
    David
    Staff
    Customer Support

    You’re welcome. Glad you got it sorted

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