Question

I was testing a website: This Website

When I stumbled upon the following problem. everything looks correct in all browsers I tesded on my computer (IE, Chrome, Safari, Firefox etc…) but When I test this website on iPad, in safari browser I get strange margin at the right side, I can’t show a screenshot, but in a nutshell image all website page like you see it on computer, but shifted to the left side (so there is blank space on the right side). Can anyone suggest what is causing this?

EDIT:

I noticed that this margin is somehow affected by margin of arrows that you can see on the sides (used to list through slides). Styles of the buttons have following id’s

#prevslide   and   #nextslide

EDIT2:

As code is very long, I will post links to stylesheets used in website here.

Slideshow stylesheets, #prevslide, #nextslide style rules can be found in second stylesheet

Style1
Style2

And main stylesheet I use to style how website looks, however I dont think that the problem lies within it.

Main Style

Answer 1

It looks like your problem is because of the combination of % and pixels in your css.

For example, your .header wrapper is set to 100%, but the .in-header inside it is set to 1020px. This is fine as long as your browser window is wider than 1020px, but when it shrinks, .header is sizing itself in relation to the browser window, and .in-header isn’t.

Set the min-width property on your body element so it won’t ever reduce below the size of your main page elements:

  body {
    min-width: 1020px;
  }