Question

当我在Galaxy S4上查看时，我似乎无法摆脱内容右侧的空白区域。我最小化浏览器时没关系。有什么建议吗？

此外，邮寄地址图标，电子邮件和电话图标不会完全排列在中心。

http://www.henschen.com/siteTemplates/2014-16/

  @media handheld, only screen and (max-width: 767px) {

body {
width: 100%;
   height: 100%;

   overflow-x: hidden;


}


.grid {
    display:inline-block;
text-align:center;

}

   .grid-pad {
   background-color: transparent;
       display:inline-block;
    text-align:center;
       }
              .gridcontent {
        background-color: #fff;



         }


.wrap {
    width: 100%;
      height: 100%;
      overflow-x: hidden;


    }
  .grid-padcontent {
 display: block;


     }

     .gridcontent {
  display: block;

      }




[class*='col-'] {
    width: auto;
    float: none;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

.logocol-3-12 {
width: 45%; 
text-align:center;
padding-bottom:1px;
     }

     #header {
    background:#232323;



}

   #wrapfooter { 

    text-align:center;
    background:#EC3515;
    color:#FEDFE0;
    font-family:arial,helvetica,sans-serif;
    font-size:12px;

   }


#footer {

    background:#EC3515;
    color:#FEDFE0;
    font-family:arial,helvetica,sans-serif;
    font-size:12px;

    align-content:center;
}



   .col-1-1 {
left: 0;
      right: 0;

    display:inline-block;
position:absolute;
background-color: #fff;
font-family:arial,helvetica,sans-serif;
font-size:15px;
background-color: #ece2bb;


     }  


    .col-1-3left  {
width: 55%;
margin-top:270px;
background-color: #fff;
font-family:helvetica,arial,sans-serif;
font-size:16px;
font-weight:bold;
float:none;
align-content:center;


     }

   .col-1-3middle  {
width:55%;
background-color: #fff;
font-family:helvetica,arial,sans-serif;
font-size:16px;
font-weight:bold;
float:none;
align-content:center;
       }

    .col-1-3right  {
width:55%;
background-color: #fff;
font-family:helvetica,arial,sans-serif;
font-size:16px;
font-weight:bold;
float:none;
align-content:center;
    }





        }

Answer 1

您必须在媒体查询中指定适当的大小才能获得解决方案。

Answer 2

我对我创造的东西有类似的问题。在媒体查询中，创建一个名为container的ID。使用隐藏，高度和宽度溢出100％创建它，然后将所有html内容包装在其中。它立即消除了这个问题。

 @media handheld, only screen and (max-width: 767px) {

body {
width: 100%;
height: 100%;
overflow-x: hidden;
}
#Container{
width:100%;
height:100%;
overflow-x:hidden;
}
}

通常造型身体对我来说不起作用！

我希望这有帮助！

当我查看我的星系s4上的网站时，空白到右边

2 个答案: