Почему съезжает блок на сайте?

Question

[Максим Герасименко]

На этом сайте есть мобильная версия, в котором есть блок с картинками лицензий медцентра. Должно выглядеть так:

Но на iphone 6S этот блок с лицензиями слезает. Не могу найти причину. Подскажите пожалуйста. На iphone 6S этот блок выглядит так:

Comments

[FeST1VaL]

Код в студию, но думаю что проблема в float каком нить.

[Максим Герасименко]

Артем Будин,
Ну там много кода. Сюда проблемно я думаю будет выложить. Там используются медиа галереи WordPress. Вы можете зайти сразу на сайт maxg5.ru посмотреть код.

[FeST1VaL]

Максим Герасименко, Вся проблема у вас в адаптиве, у вас его по сути нету) У айфона экран будет примерно 735px. А на таком разрешении у вас наезжает блок

[Максим Герасименко]

Артем Будин,
Нужно media запрос написать для разрешения 735px? Вот только для какого блока именно не понятно, ведь остальные блоки на этом айфоне нормально отображаются. А в браузере в режиме мобильной версии если ставлю ширину экрана 735px то все блоки сайта плывут.

[FeST1VaL]

Максим Герасименко, Ну так сказать проще делать просто в процентах и покрывать все разрешения. Или делать жесткое ограничение в viewport 640 ну или сколько там у вас минимальный

[Максим Герасименко]

Артем Будин,
У меня минимальный 320px по медиа запросам. Это для айфона 5 и схожих с ними.
А сейчас мне получается как решить проблему, для какого блока нужно прописать max-width: 735px и написать под этот медиа запрос CSS?
Я не могу в браузере посмотреть, т.к. когда ставлю ширину экрана 735px то у меня по другому отображается, ни как скрине айфона

[FeST1VaL]

Максим Герасименко, попробуйте посмотреть разрешение вашего iPhone например тут
и сделать такое разрешение на компе.

У меня iPhone 6 Plus 414x736, выглядит нормально.

скриншот

[Максим Герасименко]

Артем Будин,
У меня Iphone 6S. Вот данные экрана:

Но при таком разрешении с компьютера все нормально отображается. Почему на айфоне тогда слезает блок?

[FeST1VaL]

Максим Герасименко, ну крч, все же проблема в адаптиве) у тебя очень много всяких смещений... сделай разрешение 383px. И у тебя появится такая же проблема как на телефоне. Я точно не помню, но на телефоне другой pixel ratio вроде. Я просто обычно делаю фулл адаптив, под все разрешения по этому как то не вдавался в вопросы.

[Максим Герасименко]

Сделал меди запрос media (min-width: 380px) and (max-width: 410px) в браузере и подогнал под него фотографии которые съезжают. На ПК Все нормально а на айфоне как было так и осталось. В обще без изменений.

Answer 1

[Евгений]

Попробуй убрать значение top: Странно, что сайт с флексбоксами, но сами флексбоксы так плохо использованы

Comments

[Евгений]

Слишком много ненужного позиционирования

[Евгений]

Чуть не забыл, так же: