0

Имеется сайт с респонсивной версткой. В демо шаблона все идеально, проверял как на реальных устройствах, так и через Device Toolbar в Google Chrome. Перерыл все элементы на предмет размеров и отступов, не могу найти какой элемент ломает верстку, прошу помощи.

сайт

P.S. Знаю что такие вопросы не принесут пользу сообществу и от них нет никакого толка при хранении, поэтому прошу не минусовать, сам удалю вопрос после решения.

Скрин проблемы

2 ответа 2

3

Ширина .log-panel составляет 111px. Не смотря на то, что там находятся 2 элемента по 54px.

введите сюда описание изображения

Почему так произошло и откуда лишние пиксели? Проблема в лишнем пробеле:

введите сюда описание изображения

Остальные кнопки имеют ширину в 54px.

При этом, размер родителя составляет 272px.

введите сюда описание изображения

Отсюда 111 + 54х3 = 273px. Поэтому последний элемент, не поместившись в отведенные рамки переносится на новую строку.

2
  • Огромное человеческое спасибо! Проблема поиска оказалась в инструменте исследования :). GС не показывает в инспекторе текстовые узлы, да я видел что ширина этого элемента 111px но почему она такая если 2 вложенных в нее элемента по 54px я не понимал, попросту пробел не был виден. 1 апр 2018 в 10:14
  • @ДмитрийГвоздь Я использую Firefox Developer Edition, там очень много полезных штук для разработки. Не говорю, что Chrome чем-то хуже, дело привычки. Как видите, в данному случае такая мелочь стала весьма полезной. 1 апр 2018 в 20:11
0

У ссылок есть фиксированная ширина в 54px. При ее уменьшении на 1px все входит (видно на скрине) => стоит с ней поиграться.

введите сюда описание изображения

4
  • Размер в 54px по ширине соответствует тому же размеру в демо, в том то и дело, что вопрос заключается, почему в демо при той же ширине все ок, а тут нет... Смена размеров на 1px это костыль. Вопрос задавался, с целью выяснить причину, а не как исправить костылем. 1 апр 2018 в 9:44
  • Если посмотреть на элемент #quick-nav то видно что его ширина 272px. 272/5 = 54,4 все должно влазить. 1 апр 2018 в 9:51
  • #quick-nav 272px, а #logo-handler 54px. 272 + 54 = 326px при максимальном размере экрана 320px Не сходится. А вот почему... 1 апр 2018 в 9:56
  • Потому что #quick-nav смещен влево и налазит на логотип. В демо это видно также как и тут. Позиция #quick-nav 48 слева. 1 апр 2018 в 10:00

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.