Как проверить правильность отображения верстки при меньшем разрешении монитора?

Question

[Nick Krogan]

Как проверить правильность отображения картинки при меньшем разрешении монитора? ширина макета 1600, все пространство используется (LP), а монитор имеет разрешение 1280. window resizer не помогает, справа остается отступ. может нужен другой плагин? использую браузер хром. или я как-то неправильно делаю

Answer 1

[Дмитрий Мельник]

Воображение?
ну а если серьезно, то возможно поможет min-width / min-height

Comments

[Nick Krogan]

при использовании min-width картинка плывет: "берег" уходит в низ, и кнопка получается выше, чем надо

[Дмитрий Мельник]

скиньте код, так сложно сказать. Не понятно, что и как сделано

[Nick Krogan]

Дмитрий Мельник: codepen.io/Nick_Krogan/pen/gwdLWa как скинуть вместе с изображением не знаю

[Дмитрий Мельник]

Картинка будет растянута на всю высоту/ширину блока, текст с отступом сверху, он везде будет одинаково смотреться. Если это первый экран и он подразумевает высоту/ширину в 100%, то прибейте кнопку абсолютом с отступом снизу. head не забудьте position: relative прописать в таком случае

[Nick Krogan]

Дмитрий Мельник: род блок min-widht: 1600; height: 100%;(при фиксе тоже самое) у кнопки позиция абсолют, положение(top, left) фиксированное, игрался с отмером от верха изображения и от line-height текста. кнопка съезжает на второй экран. скрин добавил в начальный пост

[Дмитрий Мельник]

про min-width я говорил только для теста. отступ кнопки делайте не сверху блока, а снизу. В общем, лень дальше писать, так что вот: https://jsfiddle.net/_rdd/2ynf01bp/
Почитайте обязательно про позиционирование элементов https://webref.ru/css/position

[Nick Krogan]

Дмитрий Мельник: благодарю за ответ. все решил

Answer 2

[Skrolea]

А режим эмуляции в Хроме совсем не подходит?
https://developers.google.com/web/tools/chrome-dev...

Comments

[Дмитрий Мельник]

Мне кажется, вопрос состоял в увеличении макета (сделать его больше экрана). Разве такое возможно в панели разработчика?

[Nick Krogan]

тогда пропадает мышка и идет эмуляция сенсора.

Answer 3

[ixon]

Практически в любом современном браузере существует ряд инструментов, именуемых Инструментами Разработчика, обычно они включают средства для просмотра сайтов с меньшим экраном.
А вообще, если адаптивность хорошо реализована, достаточно всего лишь изменить размер окна браузера.