Archived topic

#mobile-header displaying wider than screen

3 replies · Started by Kyle Thomas on May 29, 2018

Viewing posts 1–4 of 4

May 29, 2018 at 6:57 am #587026

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;

May 29, 2018 at 7:24 am #587040

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;
}

May 29, 2018 at 9:37 am #587216

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

May 29, 2018 at 1:34 pm #587345

You're welcome. Glad you got it sorted

This archived topic is closed to new replies.