6

I had finished this website a while ago but something happened to it and I've now spent all day fixing it and getting it back from scratch as my backup wasn't correctly done. I don't quite understand what it's doing as I've done this technique on many other websites with no troubles, maybe I've looked at this website too long?

Here is the website. I'm wanting to put some space on the left and right hand side, however I dont just have one container as I was needing the dark grey bar at 100% of the screen and always under the banner no matter where it was. So there are 4 "containing" divs that I want to have the space. I've placed soem CSS3 media queries in but now I'm getting a gap to the right. I was thinking it was because my background mages are going all the way across but they set at 100% so I'm just not understanding whats going on. It's somethign simple, I'm not seeing it right now..

This is what I have for the media queries

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {

#header, #banner, #main, #footer-widget-area { padding: 0 2em 0 2em; }

}

This is what t looks like on my iPhone

enter image description here

Any advice is helpful and appreciated.

1
  • @ambrealsweb did u get it what i am talking about it......... Commented Nov 5, 2012 at 7:23

3 Answers 3

3
+50

Look into the viewport meta tag. If you were to add the code to your page's <head>:

<meta name="viewport" content="width=1100">

That would force the iPhone's viewport to render 1100px wide. The default viewport on an iPhone is 980px, so your page was implying that 100% width was 980px and not the true content's width.

Viewport can be tricky, here's some more info on it:

Viewport meta tag for non-responsive design

0
0

I checked the live site, looks like the issue is down to only 3 pixels of extra space on the right. I also noticed a line-break in the nav menu. It looks like changing the smartphone media query to the following will resolve the last issues:

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {

#header, #main, #footer-widget-area { padding: 0 1em 0 1em; }
#banner { padding: 0; }
#header-right { width: auto; }
#access .menu-header { width: auto; }

h4 { font-size: 1.4em; line-height: 1em; }
}
0

How about this:

#wrapper { padding:0 2em; margin:0 auto; overflow:hidden; height:auto; }
#header, #content, #stuff, #etc { margin:0;padding:0; }
#inside stuff { whatever else; }

Wrap the #wrapper around your outermost DIV (right after <body> and close before </body>).

Unless your plan is to position some elements outside of the 2em padding region, I can't imagine why this would not be a more efficient solution to your problem.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.