Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS » Страницы по ширине сдвигаются влево/ вправо

Страниц (1): [1]
 

1. mstdmstd - 27 Июля, 2017 - 15:28:43 - перейти к сообщению
Всем привет,

Посмотрите, пожалуйста на страницах(там логин отображается над вводом логина)
http://ec2-34-212-140-26[dot]us-west[dot][dot][dot]m/admin/cms-item

http://ec2-34-212-140-26[dot]us-west[dot][dot][dot]/edit?id=75&

При тестировании на Chrome на разных экстрамалых(320px) и малых ( 768px ) девайсах
страницы по ширине сдвигаются влево/ вправо - как будто что-то распирает верстку по ширине.
В инспекторе обьектов не увидел что распирает - вроде ширина не превосходит макс параметров ширины.

Проверил на http://quirktools[dot]com/screenfly/ - вроде по ширине нормально ...

кажется общая проблема для всех страниц...
Тестируя на Chromium я настроил на несколько девайсов и тестируя для айпадов(ширина 768 px)
http://imgur[dot]com/a/L7VGi
кликнув мышой и потянув влево/вправо я вижу что страница елозит влево/вправо примерно пикселей на 30
Эта разница видна на принтскринах
http://imgur[dot]com/a/PmWDG

Обычно такре происходит если что-то распирает верстку по ширине. Я не вижу из-за чего проблема.


Спасибо!
2. Vladimir Kheifets - 28 Июля, 2017 - 08:16:56 - перейти к сообщению
mstdmstd пишет:
При тестировании на Chrome на разных экстрамалых(320px) и малых ( 768px ) девайсах страницы по ширине сдвигаются влево/ вправо - как будто что-то распирает верстку по ширине. В инспекторе обьектов не увидел что распирает - вроде ширина не превосходит макс параметров ширины.

Доброе утро!
1.Попробуйте проверить на сервисе проверки CSS от W3C
http://jigsaw[dot]w3[dot]org/css-validat[dot][dot][dot]ing=&lang=ru
Выдаёт:
W3C результаты проверки CSS для http://ec2-34-212-140-26[dot]us-west[dot][dot][dot]zonaws[dot]com/login (CSS3)
К сожалению, мы обнаружили следующие ошибки (293)

затем подробно все детали.....

2. В Firefox посмотрел HTML-код и открыл Web-консоль.
У вас есть два div-контейнера с одинаковым именем.
CODE (html):
скопировать код в буфер обмена
  1. <div class="container">                
  2.     <div class="container">
  3.      ....................................
  4.      ....................................
  5.      </div>
  6. </div>

Вы пишите о проблемах “на разных экстрамалых(320px) и малых ( 768px ) девайсах”
Посмотрите, пожалуйста, ниже фрагмент bootstrap.min.css. В нём я не нашёл @media (min-width:320px){}
Спойлер (Отобразить)

3. Так выглядит страница в браузере Safari 5.1.7 (PC, Windows 10)

 

Powered by ExBB FM 1.0 RC1