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

[Guram1994]

Всем доброго времени суток.

 

У меня шапка cайта настроена адаптивно. Все устраивает, за вычетом того что на iphone5s шапка отображается не так.(Криво) Вроде в медиа запросах прописаны стили для экрана его разрешения, но ничего не получается. Прилагаю скриншоты того как должно быть, (как есть на всех устройствах меньше определенного размера) и как выглядит шапка на iphone 5s.(Возможно и на 5)

 

Прошу помочь мне в этом вопросе, может нужен отдельный медиа запрос для устройства с таким разрешением. И всякие сайты, показывающие отображение сайта с разных устройств, при включении режима "Iphone 5" - все отображается корректно.

 

[zlatoff]

Зачем отдельный медиазарос? Что то у вас в другом напортачено. Код шапки выложите. Особенно интересно как у вас иконка доставки реализованна, портак похоже в ее позиционировании либо класс btn-block у кнопки не активен при этом разрешении.

[HyperLabTeam]

вот это

.info-button.right {
    width: 100%;
}

в соответствующее размеру блок стилейmedia

 

[Guram1994]

7 hours ago, zlatoff said:

Зачем отдельный медиазарос? Что то у вас в другом напортачено. Код шапки выложите. Особенно интересно как у вас иконка доставки реализованна, портак похоже в ее позиционировании либо класс btn-block у кнопки не активен при этом разрешении.

http://roseofsoul.ru/ Вот сайт

[Guram1994]

Прошу помочь разобраться с данной проблемой. А то дизайн сайта на iphone 5 все еще криво выгядит. 

[Guram1994]

On 8/30/2018 at 6:52 AM, AWARO said:

вот это

.info-button.right {
    width: 100%;
}

в соответствующее размеру блок стилейmedia

 

 Я не совсем понял что вы имели ввиду. Плюс я ни как не могу посмотреть, сужая экран браузера на максимум, то как показывает на самом айфоне. Всякие сервисы тоже показывают все ровно, а вот на самом iphone 5 все криво как на скриншоте выше.

[Guram1994]

 Есть кто живой? Нужно решение

[Guram1994]

On 9/22/2018 at 9:49 PM, Pascha said:

"Просто @media" айфоны не понимают... пропишите (продублируйте) отдельно для него по типу: вместо @media (min-width:) написать это  @media (min-device-width),
то же с "max" ..это уже как прописано

min-device-width - будет являться для вас ключевым

и будет Вам счастие )))

Спасибо, попробую и отпишусь)