Centering Not Possible On All Mobile Browsers - Normal Browser Works Superb

Question

Oddly I have a weird problem with centering divs for mobile browsers. Like my title says: normal pc browser work just fine - nada problemo =D but these mobile devices let my main content (under the button section) stick to the left. I tried many things - looked for solutions here on stackoverflow too - but the given tipps didn't help me so far ... the last thing i was able to center was using jQuery - but I don't want to relay on that.

Here the code:




Website




    
       
      


       
      


        
       

  
    
    
  



  
    
  
  




    

         
  

  GRAFiK TASARIM
  
  Profesyonel ve Modern Grafik Tasarım
    
  
  
  

  WEB TASARIM
  
  Profesyonel ve Modern Webtasarım
  
    

  
  
  
  FOTOĞRAF ÇEKİMİ
  
  Profesyonel Stüdyo ve Outdoor Çekimleri

    


    

  
  

  REKLAM AJANSI
  
  Profesyonel Reklam Tasarim ve Jingle
  
  
  
  

  Video Prodüksiyon
  
  Profesyonel Video Prodüksiyon ve Animasyon
  
  
  
  

  Müzik Prodüksiyon
  
   Profesyonel Müzik Prodüksiyon   - Online Mastering ve Mixing -



  
    
   

  
    
    Hakkımızda | Kariyer | İletişim | Gizlilik
    
    Can-Kat © 2012

AND THE STYLE/CSS : The problem is in the #contentbody the rest is centering just fine.

body {
   background-color:#FFF;
   margin-left:0px;
   margin-top:0px;
   margin-right:0px;
   font-family:Verdana, Geneva, sans-serif;
}

#headbackground {
    width:100%;
    min-width:1024px;
    height:300px;
    position:relative;
    float:left;
    background-color:#2E2E2E;

}

#headcontent {
    width:1000px;
    height:180px;
    position:relative;
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
    text-align:center;
    background-image:url(../media/Can-Kat%20Productions%20Logo%20-%20wordpress.png);
    background-repeat:no-repeat;
    background-position:center;
}

#language {
    width:40px;
    position:relative;
    float:left;
    margin-left:920px;
    margin-top:35px;
    display:none;
}

#buttons {
    width:1024px;
    height:50px;
    margin-left:auto;
    margin-right:auto;
    color:#FFF;
    position:relative;
    font-size:20px;
}

#navimiddle
{
    width:1024px;
    height:50px;
    position:reltive;
    margin-top:4px;
    float:left;
    background-image:url(../pictures/Layout/Button/leiste.png);
}

#contentbody {
    width:1000px;
    margin-top:-55px;
    margin-left:50%;
    left:-500px;
    float:left;
    position:relative;
    display:block;
}

#contentup {
    width:997px;
    background-image:url(../media/body_top.png);
    background-repeat:no-repeat;
    position:relative;
}

#contentuplayout {
    width:960px;
    margin-left:auto;
    margin-right:auto;
    padding-top:18px;
    position:relative;
}

#contentmain {
    width:902px;
    margin-left:auto;
    margin-right:auto;
    margin-top:-10px;
    position:relative;
}

#mainrow1 {
    width:902px;
    height:305px;
    position:relative;
}

#mainrow2 {
    width:902px;
    height:280px;
    margin-top:5px;
    position:relative;
}

#verticalrowleft {
    width:600px;
    height:auto;
    color:#000;
    position:relative;
    float:left;     
}

#verticalrowright {
    width:295px;
    height:auto;
    position:relative;
    float:right;
    border-left:1px solid #000;
    text-align:center;
}

#footer {
    width:100%;
    min-width:1024px;
    height:100px;
    position:relative;
    background-color:#2E2E2E;
    float:left;
}

#footercontent {
    width:902px;
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
    position:relative;
    color:#FFF;
}

#copyright {
    width:150px;
    float:right;
    position:relative;
}

/* -------- Classes --------- */
.rollover {
    width:270px;
    background-image:url(../pictures/Layout/hover-zoom.png);
    background-repeat:no-repeat;
    background-color:transparent;
    margin:auto;
}

.smallarticel {
    width:280px;
    height:296px;
    background-color:#DDD;
    border:thin #333;
    text-align:center;
    position:relative;
    float:left;
    border-radius:5px;
}

.smallarticel2 {
    width:280px;
    height:296px;
    margin-left:26px;
    margin-right:26px;
    background-color:#DDD;
    border:thin #333;
    text-align:center;
    float:left;
    position:relative;
    border-radius:5px;
}

.smallarticelpic {
    width:270px;
    margin-left:5px;
    margin-top:5px;
    position:relative;
    background-color:#000;
    background-image:url(../pictures/Layout/hover-zoom.png);
}

.contentdevider {
    width:960px;
    height:40px;
    margin-left:auto;
    margin-right:auto;
    background-image:url(../pictures/contentdevider.png);
    position:relative;
}

.placeholder { width:100%; height:30px; position:relative; float:left; }

.linkstyle1 A:link    {color:#FFF; text-decoration:none;}
.linkstyle1 A:visited {color:#FFF; text-decoration:none;}
.linkstyle1 A:active  {color:#FFF; text-decoration:none;}
.linkstyle1 A:hover   {
    color: #F0F0F0;
    text-decoration: underline;
}

.linkstyle2 A:link    {color:#000; text-decoration:none;}
.linkstyle2 A:visited {color:#000; text-decoration:none;}
.linkstyle2 A:active  {color:#000; text-decoration:none;}
.linkstyle2 A:hover   {color:#000; text-decoration:underline;}

img
{  border-style: none; }

#language img { border-radius:5px; }

.centertext { text-align:center; }

a.link{
    background:transparent url(a-bg.png) no-repeat -81px bottom;
}

Michael · Accepted Answer

If you wish for your content to be centred on a mobile device, you will probably need to add specific CSS for a mobile device. And instead of relying on pixel based sizes you will need to use percentages.

Centre Content Mobile Device

#container {
    width: 100%
}

#content-container {
    width: 80%;
    margin-left: 10%;
    margin-right:10%;
}

Of course you could rewrite your whole CSS to be responsive to screen sizes. Here is a quick example of how you go about doing it. http://jsfiddle.net/4LSmq/

How Target Mobile Screens

// target small screens (mobile devices or small desktop windows)
@media only screen and (max-width: 480px) {
  /* CSS goes here */
}

/* high resolution screens */
@media (-webkit-min-device-pixel-ratio: 2),
         (min--moz-device-pixel-ratio: 2),
         (min-resolution: 300dpi) {
  header { background-image: url(header-highres.png); }
}

/* low resolution screens */
@media (-webkit-max-device-pixel-ratio: 1.5),
         (max--moz-device-pixel-ratio: 1.5),
         (max-resolution: 299dpi) {
  header { background-image: url(header-lowres.png); } 
}

Second Solution

Try changing

#contentbody {
    width:1000px;
    margin-top:-55px;
    margin-left:50%;
    left:-500px;
    float:left;
    position:relative;
    display:block;
}

to

#contentbody {
    width:1000px;
    margin-right:auto;
    margin-left:auto;
    position:relative;
    display:block;
}

Your mobile screen is less than 1000px so your margin set in percentage is relative to the screen width which is less than 1000px in this case. Example http://jsfiddle.net/R9rSx/

Also it is wise to add, change the width until you get the desired look

Centering Not Possible On All Mobile Browsers - Normal Browser Works Superb

Answers (2)

Centre Content Mobile Device

How Target Mobile Screens

Second Solution

Related Questions