Home/ Questions/Q 8980259
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T20:02:29+00:00

I had finished this website a while ago but something happened to it and

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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