[resolved] CSS issue on mobile Safari cuts content off (3 posts)

  1. 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?

  2. Ryan Sullivan
    Posted 4 years ago #

    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;
    background: #CECED3;
    color: #43424A;
    border: 1px solid green;
    #dark-foot {
    background: #43424A;
    color: white;
    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" />
  3. Woot! The trick with the viewport totally helped.
    Thanks so much for that.

Topic Closed

This topic has been closed to new replies.

About this Topic