Im nearly finished with this website but for one problem. On iphones (and possibly

Question

0

Asked: June 7, 20262026-06-07T09:18:26+00:00 2026-06-07T09:18:26+00:00

Im nearly finished with this website but for one problem. On iphones (and possibly

0

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?