Mobile behavior not detecting correct screen size

  • Resolved figure2

    (@figure2)


    6 years, 8 months ago

    Hi all, I am getting some strange behavior from this theme I have built. This is a child theme of a parent theme I created using Underscores and Bootstrap.

    When I load the website into my phone, it sometimes comes in too narrow (see screenshot from Chrome developer tools below).

    If I click on the menu to go to a different page, it corrects itself. However when I turn my phone to landscape, it comes in at full, desktop size. Again, if I click on a different page in the menu, it corrects itself.

    Any idea what is causing this?

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    6 years, 8 months ago

    It appears to be glitch in the Chrome emulator more than anything. Your site looks OK for me in FF emulator and on an actual phone using mobile Chrome. I do get the same display error in my Chrome emulator as well. While it’s disconcerting, I don’t think there’s anything wrong with your site. Emulators are not 100% representative of what you get on actual mobile devices.

    Thread Starter figure2

    (@figure2)

    6 years, 8 months ago

    I got some help over at StackExchange.

    In my mobile media query, my absolute positioning of the menu ul was stretching the width of the page:

    @media screen and (max-width: 600px)
.nav-menu {
    position: absolute;
    left: 5000px;
}

    By adding relative positioning and hiding the overflow on the parent div, the problem was solved:

    .menu-menu-1-container {
    position: relative;
    overflow-x: hidden;
}
    Moderator bcworkz

    (@bcworkz)

    6 years, 8 months ago

    I’m glad that’s solved! It’s curious how it doesn’t get represented consistently. Thanks for reporting back with the solution.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Mobile behavior not detecting correct screen size’ is closed to new replies.