Mobile behavior not detecting correct screen size

  • Resolved figure2

    (@figure2)


    5 years, 7 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)

    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)

    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)

    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.