Extra space at Smartphones

Question

My site's theme is a Drupal responsive theme (Pixture reloaded) and is set to 960px width, with a maximum width of 1140px and 90% width.

At PC, the site looks fine with all browsers. at SP, there is extra space from the left. I have no idea how to Check the reason and fix it. please help me understand what went wrong. thanks.

Answer 1

You have to edit media-queries in the css files delivered with the template. To add extra, 20px padding to the body for screens with max-width:960px;, I suggest adding the following to your code:

@media only screen and (max-width: 960px) {
   body {
     padding-left:20px;
     padding-right:20px;
   }
}

You can of course modify that stylesheet by changing the first line, e.g. to make 40px paddings for screens that have width between 500 and 960px you would write:

@media only screen and (min-width:500px) and (max-width: 960px)

If you don't want to use media queries, you can apply paddings directly to the body by just adding:

body {
    padding-left:20px;
    padding-right:20px;
}

This will add paddings for every screen (even wider than 960px) but the end-result would be the same.

So, pick the option you fell more comfortable with. The first one gives you more flexibility but it's more complex. The second one is simpler and easier in implementing.

Answer 2

The problem persists...

My other site www.Grar-Natan.co.il uses the exact same template (and Exact same CSS) and doesn't have this problem. The only diefference between the sites is that the second one have a siderbar... A lack of sidebar seems to cause the problem... I could easily bring one in, but I'd rather not put a sidebar in the site.