3

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

2 Answers 2

2

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;
  }
2
  • Hi thnx it works now ;)) , but still one of the arrows has that strange margin it is #nextslide arrow, its styles are available in Style2 link which is added to my question. it was originally set to margin-top: 50%; , but when I changed it to different value everything on website was screwed up, I assume that this margin-top is what is causing the problem. Maybe you have any ideas on why this happens?
    – Ilja
    Commented Aug 12, 2012 at 12:00
  • Hi, your sample site's disappeared, & your question describes something different to the css. Page looked fine in Chrome (no iPad). So all up, flying blind! That said, my first idea would be to find a way to put slides in a containing div that has {position: relative} (either an existing element with the 1020 width, or a new one). Using % for vertical positioning can be problematic; & sometimes margins can interact badly between sibling elements. Commented Aug 13, 2012 at 11:26
2

You'll need to set a meta tag in the header for the ipad (and mobile):

<meta name="viewport" content="width=device-width" />

This instructs the browser to set the page body to match the tablet size. I'm not 100% sure this is the exact setting you want, but I don't have my iPad handy to test; whatever the solution, it lies in this tag.

1
  • Ah, I've just looked at your site in conventional Chrome, in a reduced-size window. What you were describing sounded identical to a problem I had, for which the above fix worked, but your problem is different. I'm adding a separate answer to address your problem, because I think this answer might help others. Commented Aug 11, 2012 at 23:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.