0

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
16
Views
3 Years
Discussion Span
Last Post by JorgeM
0

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

so, try min-width: 100%;

0

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

0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.