Кажется, я не могу избавиться от пробелов справа от моего контента, когда смотрю на свою 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;
}
}
У меня была аналогичная проблема с тем, что я создал. В рамках медиа-запроса создайте идентификатор, называемый контейнером. Создайте его с переполнением скрытых, высоты и ширины на 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;
}
}
Обычно укладка тела не работала для меня!
Надеюсь, это поможет!
Чтобы получить решение, вы должны указать соответствующий размер в запросе на медиа.
min-width: 755px;
заставляет.grid
быть больше, чем выделенный размер экрана.