CODEWITHSUNDEEP
iphoneioscssipad
Dimitri Vorontzov
Dimitri Vorontzov

Reputation: 8104

Show Entire Width of Website on iPhone and iPad

I'd appreciate a bit of advice from someone skilled with CSS. For a reason I can't pinpoint, only the right side of my website shows up in iPhone / iPad browser, and the left 1/3rd of it can't even be seen.

If someone could explain what causes the issue and how it can be fixed, I'd be grateful.

Here's the part of css that sets the layout:

body {
position:absolute;
width: 960px;
top: 0px;
left: 50%;
margin-left: -480px;
}

Upvotes: 0

Views: 468

Answers (2)

Johan
Johan

Reputation: 19062

First: Try to remove this (position: absolute; width: 960px; top: 0px; left: 50%; margin-left: -480px;) from your body.

Second: here's how to center a page width: 960px; margin: auto, put that on #page

So with the some css on body removed and the css below on #page it may work better

#page {
    width: 960px;
    margin: auto;
    overflow: hidden; /* to compensate for some element overflowing and messing up your layout */
}

Upvotes: 1

Romain
Romain

Reputation: 1948

you need to modify the width of your body on every device. You can use @media query to do it by css

/*  Ipad Landscape */
@media screen and (max-width: 1100px) {
  body {
    width: 80%;
    left: 0%;
    margin-left: 10%;
  }

}

/* iphone 5 landscape ipad portrait */
@media screen and (max-width: 800px) 
{
}

/* iphone 4 lanscape */
@media screen and (max-width: 500px) 
{
}

/* iphone 4- 5 portrait */
@media screen and (max-width: 400px) 
{
}

Upvotes: 1

Related Questions