Member Avatar for mgn2683

I'm having an issue with the footer width on a website. On computer screens, the footer fills to 100% as it should, but on mobile devices (tested on both I-Pad & iPhone) it doesn't fit the entire width of the screen.

The issue can be viewed here:

The main footer css is:

#footer {
    position: relative;
    bottom: 0px;
    width: 100%;
    height: 75px;
    margin-top: -75px;
    clear: both;
    background-color: #555555;
    margin: 0 auto;
}

If anyone has any advice, it would be greatly appreciated!

  • 2 Contributors
  • 4 Replies
  • 3K Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

This usually comes down to two things on iOS: the viewport and the box you are measuring 100% against. is right to look beyond the footer’s own rules.

Quick fixes to try first:

  1. Set a proper viewport so CSS pixels match the device width. Without it, Safari lays out at a wider virtual canvas and scales, which can make a 100% bar look short on phones.
<!-- in <head> -->
<meta name="viewport" content="width=device-width, initial-scale=1">
  1. Remove the UA default margins so the page truly reaches the screen edges.
html, body { margin: 0; }

Browsers ship a user‑agent stylesheet that adds an 8px margin to body by default, so clearing it is important when you expect edge‑to‑edge elements. (developer.mozilla.org, w3.org)

If the footer still does not span, check its containing block. A percentage width is calculated from the nearest containing block, not the viewport. If the footer sits inside a centered wrapper with a fixed/max width, 100% will only fill that wrapper. Move the footer outside the constrained wrapper, or restructure the page so the outermost container defines the layout and the footer lives in it. A simple, reliable pattern is a sticky footer using modern layout:

.site { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }           /* content grows and pushes footer down when needed */
footer { /* full width by default inside .site */ }

This avoids negative margins and positioning tricks that often break on smaller screens. (developer.mozilla.org)

Debug checklist:

  • Inspect the footer’s parents on mobile: any fixed width or horizontal padding on a wrapper will cap the footer’s width.
  • Temporarily outline elements to spot unintended overflow: * { outline: 1px solid rgba(255,0,0,.15); }
  • Remove negative margins on the footer and let layout handle placement; use the pattern above instead.

Recommended Answers

All 4 Replies

Member Avatar for JorgeM

I had the same issue on my site. The fix was to use min-width instead of width.

so, try min-width: 100%;

Member Avatar for mgn2683

I tried implementing this, but there was no change. Any other thoughts/ideas?

Member Avatar for JorgeM

I assure you that I had the same issue... Ok, so on my site, my footer does not have the position set to relative. See if this helps..

these settings are closer to what I have set. Unfortunately, while I can use my desktop browser to adjust your CSS and see the results, I cant see the temp changes on my mobile device because I dont have the same tools there.

#footer {
    min-width: 100%;
    height: 75px;
    margin-top: -75px;
    float: left;
    background-color: #555555;
}

Also, looks like you have extra space between your content and the footer. If you want to show the footer on the bottom of your page if space permits, take a look at this tutorial on Pushing a Footer to the Bottom of a Web Page

Edited by JorgeM
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.