CODEWITHSUNDEEP
cssmobilewidthscreencompatibility
Ben
Ben

Reputation: 139

Width: 100% not filling up screen on mobile devices

I'm currently trying to optimize a Wordpress site for mobile devices, but I'm struggling with getting the footer of the site to cooperate. The site is here: http://whitehallrow.com/

When loaded on mobile, the width of the body shrinks in accordance with the screen size and wraps all the contained text within it. However, the footer keeps its width, which I understand is because the width is hard-coded to look good on a computer screen. I've made a media query in the CSS that targets devices with screens 500 pixels wide or smaller, in order to get the footer to resize to the width of the body. Here is a snippet of my CSS that I've been tweaking:

@media screen and (max-width: 500px) {
#customfooter{
        width:100%;
}
}

For whatever reason, this is not working - it still shows the footer as being much wider than the body. I've tried max-width:100%, width:auto; max-width:auto, and none of them work.

How do I achieve this without hard-coding anything?

Upvotes: 2

Views: 8661

Answers (2)

Arth Du
Arth Du

Reputation: 807

Change your CSS from 

#teakfooter {
    width: 100%;
}
#verybottom {
    width: 100%;
}

add a class so this gets higher priority

.page #teakfooter {
    width: 100%;
}
.page #verybottom {
    width: 100%;
}

I tried it out using Firebug and it seems to be working well like this.

Edit: After going over a few more things in the comments, I noticed a couple of things causing the footer to not fill out.

.site {
    padding: 0 1.71429rem;
}

This is causing #customer footer to have padding on both sides.

#teakfooter {
    margin-left: -40px;
}

This is causing #teakfooter to have whitespace on the right side.

Upvotes: 2

bboy
bboy

Reputation: 1408

also in firebug you can check METRICS (in right column you have Computed Styles, Styles, Metrics, etc.). In METRICS you will see that around your body there is a padding: 24px;

Solution:

body {
  padding: 0; 
}

Upvotes: 0

Related Questions