CSS Layout shifts to Right on iPhone/iPad? - css

Question

Super weird: For some reason, my site's front page layout (CSS) shifts to the right on a mobile device when it's supposed to be centered? See: http://www.stylerepublicmagazine.com
Does anyone know why this is? I've seen this error on other forums, but no one seems to have a solid fix for it.
Here's the main portion of the stylesheet for my template:
#wrapper {
position:absolute;
width:100%;
margin: 0, auto;
margin-top:60px;
}
#socialmedia {
float:right;
}
#topbanner {
margin-left:180px;
width:990px;
}
#magnavigation {
position:absolute;
margin-top:150px;
margin-left:150px;
}
#featureslides {
position:absolute;
margin-top:240px;
margin-left:190px;
width:1000px;
}
div.img
{
padding-top:40px;
margin: 0px;
height: 150px;
width: 150px;
float: left;
text-align: left;
vertical-align:top;
padding-right:62px;
}
div.imglast
{
padding-top:40px;
margin: 0px;
height: 150px;
width: 150px;
float: left;
text-align: left;
vertical-align:top;
}
div.img img
{
display: inline;
margin: 3px;
}
div.articlename {
padding-top:5px;
font-family:'Oswald', sans-serif;
font-size:1.4em;
}
div.desc
{
padding-top:5px;
text-align: left;
font-family:helvetica;
font-size:1em;
font-weight: normal;
width: 140px;
margin: 0px;
padding-bottom:100px;
}
#morefeatures {
margin-top:180px;
float:left;
width:685px;
padding-right:15px;
padding-bottom:20px;
}
#adverts {
width:300px;
float:right;
margin-top:180px;
}
.FrontHeading {
font-family: 'Oswald', sans-serif;
font-size:30px;
padding-bottom:5px;
}
Thanks,
B

Answer 1

You're declaring a lot of margin-left properties which causes the elements to shift to the right.
Before and after removing the margins on the left.

Answer 2

As some others pointed out, you're simply using too many position: absolute properties in your CSS and basically, you've tuned your layout for one resolution (1440 wide). For example, on my resolution of 1920x1080, your layout appears on the left.
You can fix this by removing all position: absolute properties and using substitutes. For example, for the main column, you should be using margin: 0 auto, which will center it.
I've created an example of a layout you can use, to get an idea of the various types of positioning you'll want to use for your layout. I essentially duplicated the layout (more or less) using different properties that should scale across resolutions and devices.
The Fiddle
HTML
<div id='wrapper'>
<div id='banner'>
Your logo
<div id='social'>FACEBOOK | TWITTER</div>
</div>
<div id='slides'><img src='http://placekitten.com/500/200'/></div>
<div class='news'>News item 1</div>
<div class='news'>News item 2</div>
<div class='news'>News item 3</div>
<div class='news'>News item 4</div>
<div class='news last'>News item 5</div>
<div class='blog'><div class='entryimg'><img src='http://placekitten.com/50/50'/></div> Blog entry</div>
<div class='blog'><div class='entryimg'><img src='http://placekitten.com/50/50'/></div> Blog entry</div>
<div class='blog'><div class='entryimg'><img src='http://placekitten.com/50/50'/></div> Blog entry</div>
<div class='blog'><div class='entryimg'><img src='http://placekitten.com/50/50'/></div> Blog entry</div>
<div style='clear: both'></div>
</div>
CSS
#wrapper {
width: 500px;
margin: 0 auto;
font: 18px sans-serif;
}
#banner {
background: #8888ff;
padding: 20px;
margin-bottom: 5px;
}
#social {
float: right;
margin-top: -10px;
font-size: 50%;
}
#slides {
margin-bottom: 5px;
}
.news {
background: #88ff88;
display: inline-block;
*display: inline; /* IE8- hack */
zoom: 1; /* IE8- hack */
margin-right: 10px;
width: 78px;
text-align: center;
padding: 5px;
}
.news.last {
margin-right: 0;
}
.blog {
margin-top: 8px;
clear: both;
}
.blog .entryimg {
float: left;
margin-right: 10px;
}
Result

Answer 3

Too much position absolute for the CSS I think.
Change these few CSS for content to center.
#wrapper {
width: 100%;
margin: 0 auto;
margin-top: 60px;
}
#topbanner {
margin-left: 180px;
width: 990px;
margin: 0 auto;
}
#magnavigation {
margin-top: 150px;
margin-left: 150px;
margin: 0 auto;
}
#featureslides {
margin-top: 240px;
margin-left: 190px;
width: 1000px;
margin: 0 auto;
}
I suggest you to reconstruct your section as it's quite a mess and hard to control from what I saw.