Ширина экрана переполнения тела только на мобильных телефонах

Question

Я пытаюсь создать жидкостный макет, который адаптируется к разным размерам экрана ... Он работает на рабочем столе без проблем, но на планшете или мобильном телефоне тело переполняется и создает горизонтальная полоса прокрутки. Click here you can see the problem

Я уже проверил все элементы и их прокладки и поля, и это не проблема.

Answer 1

Проблема связана с тем, что свойства css заданы для класса **.bottomlong**. Вам нужно будет более точно управлять min-width. В настоящее время min-width установлен в 120px, так что это одна из главных причин, по которой он дает горизонтальную полосу прокрутки. Либо вы получите меньше 120px min-width или положите float:left; за .bottomlong.

Я заметил, что вы не используете BREAKPOINTS. Лучшей практикой было бы использование контрольных точек для достижения результата на разных устройствах.

Вот некоторые из наиболее часто используемых точек излома

@media screen and (max-width:959px){ 
    /*your css classes*/ 
} 
@media screen and (max-width:640px){ 
    /*your css classes*/ 
} 
@media screen and (max-width:320px){ 
    /*your css classes*/ 
} 

Вы можете, как обратиться GOOGLE DOCS FOR BREAKPOINTS для получения более подробной информации.

Answer 2

Используется для этого CSS для рабочего стола свитка удалите

footer.cssлинии нет 55

.infolinksbottom{ 
margin-left:5%; // remove this line 
margin-left:0; //add this line 
padding-left:5%; // add this line 
box-sizing: border-box; // add this line 
}