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: Click 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
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.