Support » Fixing WordPress » CSS issue on mobile Safari cuts content off

  • Resolved Christine Rondeau

    (@crondeau)


    Volunteer Forum Moderator

    If you take a look at this site on any browser, – http://test.bluelimemedia.com/pat/contact-us-2/
    The footer area consists of two bands of grey that span the whole width of the site.

    If you look at this same url on your iPhone or ipad, the boxes are cut off. I’ve tried altering the divs and adding different width everywhere, but can’t seem to get this to work. Does anyone know why the mobile browser does this? Anyone come across this before?

Viewing 2 replies - 1 through 2 (of 2 total)
  • You’ll notice that if you resize the “working browsers” and then scroll back to the right, that the footer has the same issue.

    One possibility you could look at is adding a min-width to the footer.

    #gray-foot {
    width: auto;
    min-width:1164px;
    background: #CECED3;
    color: #43424A;
    border: 1px solid green;
    }
    #dark-foot {
    background: #43424A;
    color: white;
    min-width:1166px;
    width: 100%;
    }

    It’s a little bit of a hack, but it’ll work. Another option could be to add a viewport to the header of your site.

    Something like this:

    <meta name="viewport" content="width=1164" />
    Christine Rondeau

    (@crondeau)

    Volunteer Forum Moderator

    Woot! The trick with the viewport totally helped.
    Thanks so much for that.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘CSS issue on mobile Safari cuts content off’ is closed to new replies.