- This topic is empty.
July 28, 2014 at 6:24 pm #176719
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.
Thank youJuly 28, 2014 at 6:46 pm #176720AlenParticipant
Open your CSS file and do a search for
width:1000px;. Not sure if you meant to use
max-width, but nevertheless you’re defining fixed width which is messing up mobile view.July 28, 2014 at 10:57 pm #176733
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.July 29, 2014 at 6:53 am #176762Alan CParticipant
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.July 29, 2014 at 3:46 pm #176845
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.July 29, 2014 at 4:04 pm #176846Alan CParticipant
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.July 30, 2014 at 11:00 pm #177067
I’m working on this now.
Much cleaner than how I had it before.
- The forum ‘CSS’ is closed to new topics and replies.