Footer will not extend to 100% width on iphone, why?

iphone html css mobile-safari responsive-design

12,288

Use viewport meta tag to make your website support in mobile browsers.

Here is a great description about this:

https://developer.mozilla.org/en/Mobile/Viewport_meta_tag/

& here is a great disscussion about this on github (must read the fifth comment):

https://github.com/h5bp/html5-boilerplate/issues/1099

12,288

Author by

bestfriendsforever

Updated on June 04, 2022

Comments

bestfriendsforever almost 2 years
Im nearly finished with this website but for one problem. On iphones (and possibly other mobile devices) the footer is cut off short at the bottom to the right, leaving a white space, even though i've set the footer to min-width:100%. I'm unsure what is causing this and would appreciate any help on this. You can visit the website here

I've broke down the HTML below to the essentials.
```
<body>

<div class="content">

    <header>
        <img /> 
    </header>

    <img />
    <h3>Title</h3><br>
    <p>
        Paragraph
    </p>
    <div class="push"></div>

</div>

<div id="footer">
    <a href="page.html">
        <img />
    </a>
    <ul>
        <li>
            <h3>footer title</h3>
            <p><a href="page.html">footer Link</a></p>
        </li>
        <li>
            <h3>footer title</h3>
            <p><a href="page.html">footer Link</a></p>
        </li>
        <li>
            <h3>footer title</h3>
            <p><a href="page.html">footer Link</a></p>
        </li>
    </ul>
        <p>copyright text<a href="page.html">link</a></p>
</div>

</body>
```
And the CSS
```
body{
text-align: center;
padding-top: 40px;
color: #333;
margin: 0px;
width: 100%;
    min-width: 980px;
}

.content{
width:1080px;
margin: Auto;
}

#footer {
background-color: #000;
float: left;
height:250px;
min-width:100%;
margin-top:70px;
padding-top:45px;
}

#footer ul{
list-style:none;
padding: 0px;
margin-top:30px;
}
```
Thank you!

Edit:

Ok, i've followed the suggestions of adding a viewport meta tag to the website. However it's made it even more confusing for me. Instead of the website displaying scaled to the screen, its now displaying way too zoomed in and the footer is now a small square whimpering in the lower left corner. I've added the viewport meta tag like this
```
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
```
You can see this live here Am I writing the viewport meta wrong somehow? wrong values?

Edit2: I'd also like to point out that the body is extending to the full width of the viewport, you can see that here: http://gloryillustration.com/tests/test9.html Where i made the background colour of the body grey, so you can see that it's just the footer that is misbehaving! I would believe that body tags and div tags would behave the same in this respect but they don't?
- SVS almost 12 years
  
  read this & add it too ur website developer.mozilla.org/en/Mobile/Viewport_meta_tag
- WrightsCS almost 12 years
  
  @SVS you should move this comment to an answer.
- DrinkJavaCodeJava almost 12 years
  
  Why are the required attributes not in the image tags?
- Chad almost 12 years
  
  It looks like your image is expanding the size of the page past 100% in a mobile view. If you set the image to a percentage, so it doesn't expand beyond your screen, that should fix your issue.
- bestfriendsforever almost 12 years
  
  Pardon, what image are ou talkin about? Is it the image in the footer?
bestfriendsforever almost 12 years

hmmmm, seems to have created more confusion for me, see my edit above.
SVS almost 12 years

@bestfriendsforever Ohh!! i checked your website css, there is no device specific css then what is the use of this meta viewpost.If u just want to display the same website layout in all browsers then its will happen. Try to resize your browser & drag hrizontal scroller to right then also your footer will be clipped. Use media queries to make your website responsive.
bestfriendsforever almost 12 years

Thanks SVS, i think your comment is the answer i've been looking for, the solution to this problem is a lot more involved than i originally thought. Thanks again.