Как правильно сверстать?

Question

[EgayVladimir]

Я верстаю макет с шириной 1080px и когда я вставляю такое размер в хром дев тулс чтоб посмотреть как оно будет выглядеть на мобилке появляется горизонтальный скролл, как этого избежать? Как я понял туда нужно другие параметры вписывать, но какие? И как их вычислить?

HTML -https://pastebin.com/kwtZAspB
CSS- https://pastebin.com/pRhferYr

Answer 1

[Yupiter7575]

Сделать ширину поменьше? код приложите

Comments

[EgayVladimir]

Если я ширину делаю меньше то сролл становится больше, код приложил к посту

[Yupiter7575]

EgayVladimir, ширину body надеюсь меняете

[EgayVladimir]

Yupiter7575, проблема в body?

[Yupiter7575]

EgayVladimir, Да, он у вас фиксированый.

[EgayVladimir]

Yupiter7575, я не понимаю как это решает проблему, если я вставляю в параметры окна такой же размер как и ширина body

[Yupiter7575]

EgayVladimir, Я бы выразился но меня забанят. Просто поймите у телефона не бывает ширины 1080px! И вы вставляете в ширину 500px body с шириной 1000px конечно же получится скролл. Зачем вообще body ставить фиксированую ширину? почему не создать div.wrapper как нормальные люди

[EgayVladimir]

Yupiter7575, последний вопрос, а как мне тогда версть макет точь в точь если там заданы такие размеры?

[Yupiter7575]

EgayVladimir, Желательно так не делать, лучше использовать проценты. А вообще если вообще никак media запросами, делаете брейкпоинты

[EgayVladimir]

Yupiter7575, понял, спасибо за развёрнутый ответ

Answer 2

[Сергей delphinpro]

body{
    width: 1080px;
    /* … */
}

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

Рекомендую погуглить основы адаптивной верстки.