[Solved] Width of div is not displaying at 100% on mobile/smaller screens

[brexy]

Hi I just looked at my company’s website on my mobile phone (Chrome browser, Android) and the width of the footer and bottom div aren’t displaying at 100% width of the screen. I’ve tried out a few things to fix this but none have worked.

This also happens if I resize the browser window to a certain point (arund 1300px which is the width of my content). When I scroll horizontally, I can see that the footer and bottom div aren’t actually 100% either, and the body background is showing through.

Any help is appreciated. I realise the site is not mobile friendly yet, but for now I’d just like the footers to display correctly.

Link to site: http://www.infotrack.com.au
Link to css: http://www.infotrack.com.au/styles/default.css
Screenshot of error

Thank you

[Alen]

Open your CSS file and do a search for width:1300px; and width:1000px;. Not sure if you meant to use max-width, but nevertheless you’re defining fixed width which is messing up mobile view.

[brexy]

The .content class has a width of 1000px. I removed this from the #bottom id to see if it would fix the problem but it doesn’t.

Changing it to max-width didn’t work either.

I’m using the .content class throughout the and the footer/bottom is the only place it isn’t working properly.

[Alan C]

No Alen is completely correct. The mixture of some elements being set to 1300px and others being set to 1000px is what is giving you that non-scaling look and scroll bars. I went in with firebug and removed every set width declaration of these two and the site looked great.

[brexy]

Okay I did what you said, I removed all width declarations that were 1000px or 1300px
This is it now what it looks like (firefox): http://i62.tinypic.com/ad185f.jpg

Could you please tell me what you did? If I’m removing these widths the site is not going to look how i originally wanted.. I must be misunderstanding something.

[Alan C]

Well the good news is this all looks pretty decent. What you would do from that point is put it all into a container with a max-width set to roughly 1300px (since that was around what you had everything at). That means the container will expand to that size if it can but not go over.

Then from there you can position everything around and use breakpoints to make sure it degrades gracefully. As for your image there with the leaves you have two options.

If you are going to want that full screen you would not constrain it to the aforementioned 1300px container but allow it to go to 100% and perhaps impose some sort of max height on it so you don’t end up with a monster image. Actually it might be better to get the image to a good aspect ratio and just let the browser handle that for you.

The second option would be to go ahead and constrain it and just deal with people having browsers over 1300px not getting the full width image experience.

[brexy]

Thanks Alan/Alen
I’m working on this now.
Much cleaner than how I had it before.

Thanks again!

[Author]

Posts