CODEWITHSUNDEEP
iphonecssmobilepaddingmedia-queries
kia4567
kia4567

Reputation: 603

Setting up padding for websites in mobile devices

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.

Upvotes: 6

Views: 2001

Answers (3)

FurryWombat
FurryWombat

Reputation: 826

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.

Upvotes: 0

tiffon
tiffon

Reputation: 5040

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; }
}

Upvotes: 0

djfarrelly
djfarrelly

Reputation: 390

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

Upvotes: 3

Related Questions