Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Page Width Issues when switching to Landscape on Android

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #208661
    metageeky
    Participant

    Hi all,

    Huge fan of this site and always learn lots from the articles. I’m hoping you can help with a responsiveness design issue I’m having. The development site is here.

    The problem I’m having is that on Android (such as my Samsung Avant), if I start in portrait mode and then rotate to landscape, the pages fail to fit the whole screen. The full width rendering flashes for a second, but then maybe a zoom happens or something. This happens in both the Android browser and Chrome.

    I’ve exhausted my thoughts on what could be going on. I’ve adjusted the meta viewport, played with CSS, etc. Any help?

    Some caveats worth knowing:

    • The overall system is hosted and I have limited access points for changes
    • The actual HTML/CSS structure is not well-developed (this is the case for too many library systems) and has plenty of issues

    • I’m currently trying to improve on the responsive design

    • I’m also working on other parts of that site’s code, so you might see some tweaks if you view it.

    Thank you in advance. If I could, I would strip the site down to nothing and rebuild it, but it’s not within m power, time, etc.

    Cheers,

    metageeky

    #208689
    metageeky
    Participant

    Update:
    No idea what I did, but rotating from portrait to landscape in Chrome now works. The Android browser still gives a zoom out effect that leaves the right third of the page blank.

    Any ideas?

    metageeky

    #208691
    metageeky
    Participant

    Edit:
    Just to show the issues going on, here’s an image of how the page looks when you rotate to landscape if the page was first loaded in portrait mode: link

    Here’s what the page looks like correctly when first loaded in landscape mode: link

    metageeky

    #208704
    metageeky
    Participant

    I feel awkward being the only one posting to my own thread, but I figured out the issue (mostly). Turns out there were some empty divs being inserted by the ILS. These had min-widths that forced the page to be wider. Apparently, the Android browser rendered their widths despite their lack of content.

    I have to thank this article on finding unintended overflows for leading me to the source of my problems. I was tracking down a different issue and found the main problem. Thanks!

    metageeky

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.