Menu
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
Any advice is helpful and appreciated.
282
A recommended approach is to use “resolution switching,” with which it is possible to instruct the browser to select and use an appropriate size image file depending on the screen size of a device. Switching the image according to the resolution is accomplished by using two attributes: srcset and sizes.
Padding is the space that's inside the element between the element and the border. Padding goes around all four sides of the content and you can target and change the padding for each side (just like a margin).
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
57
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
