我无法让我的移动版网站完全居中

时间:2013-08-13 21:01:19

标签: css

我的网站左侧有一些奇怪的空间问题。出于某种原因,在移动视图中左侧的空间略大于右侧,因此看起来偏离中心。我也猜测它的桌面视图,但它并不明显。我无法弄清楚这是怎么做的。 http://jeffreydowellphotography.com/

/* ---------->>> MOBILE gap/space issues <<<-----------*/

@media screen and (max-width: 400px) {

#pageWrapper { margin: 0;}

.sqs-layout .sqs-row .sqs-block:last-child {
     padding-bottom: 0;
     padding-top: 0;
  }}



/* ---------->>> MOBILE center logo <<<-----------*/

@media only screen and (max-width: 400px) {

        h1.logo {
            text-align:center;  
            margin-bottom: 20px !important;
            }}



/* ---------->>> MOBILE logo size <<<-----------*/

@media only screen and (max-width: 400px) {


.logo-image .logo img { 
    max-height: 110px;
    margin: 5px;
    width: auto;
  }

.social-links {
    padding-top: 20px; 
  }}

enter image description here

1 个答案:

答案 0 :(得分:4)

尝试删除移动样式中的margin: 5px;上的.logo-image .logo img。带边距的图像可​​能比包含图像的div宽,并且它以非居中的形式出现。

更新

我看了一下你的网站,它实际上是.slide选择器的边距。在您的移动样式中添加:

 .slide { margin: 0; }