Пробел направо, когда я проверяю сайт на моей Galaxy S4

0

Кажется, я не могу избавиться от пробелов справа от моего контента, когда смотрю на свою 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;
    }





        }
  • 2
    Ваша min-width: 755px; заставляет .grid быть больше, чем выделенный размер экрана.
  • 0
    MackieeE побил меня к этому; он прав
Показать ещё 1 комментарий
Теги:

2 ответа

0

У меня была аналогичная проблема с тем, что я создал. В рамках медиа-запроса создайте идентификатор, называемый контейнером. Создайте его с переполнением скрытых, высоты и ширины на 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;
}
}

Обычно укладка тела не работала для меня!

Надеюсь, это поможет!

0

Чтобы получить решение, вы должны указать соответствующий размер в запросе на медиа.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню