Min-width у body. Как?

Question

[JackShcherbakov]

Здравствуйте!

Верстаю страничку. Дизайн выдерживает экраны минимум до 500px. При экранах меньшего размера верстка "падает":



Мне нужно сделать так, чтобы при достижении экраном ширины в 500px страница не перестала уменьшаться, а чтобы просто снизу появился горизонтальный скролл и юзер бы просто скролил страницу влево-вправо. Я попытался добавить body min-width: 500px - вообще не помогло. Пытался добавить это свойство к html - безрезультатно.

Заранее выражаю огромную благодарность всем, кто поможет!

Answer 1

[DanKud]

@media (max-width: 500px) {
    body {
        width: 500px;
    }
}

Comments

[JackShcherbakov]

Вообще не помогает. Я так тоже пытался

[DanKud]

JackShcherbakov, значит 500px мало для вашей верстки и она при ширине 500px съезжает.

[JackShcherbakov]

DanKud, 500px это минимальное значение, которое выдерживает верстка. У меня там в css везде media queries вот так прописаны (для минимальных размеров):

/***         MEDIA QUERIES 600-767         ***/

@media screen and (min-width: 500px) and (max-width: 767px) {

Поэтому 500px - минимальное

[JackShcherbakov]

Мне просто надо сделать чтобы страница перестала сжиматься менее 500px, но как это сделать я вообще не понимаю. Я в лоб задаю body width: 500px; и ничего не получается. min-width тоже не сработал. Все дело в том, что media queries берут ширину не body, а viewport

[JackShcherbakov]

DanKud, проблему решил. Просто не делал минимального порога в media queries. Min width начал работать. Спасибо вам за ответ

Answer 2

[Алексей Николаев]

Просто добавьте к body свойство min-width. Спойлер - само по себе оно не может не работать, ибо простое, как дважды два. Можете проверить на каком-нибудь codepen.

Comments

[JackShcherbakov]

я тоже так думал, и оно так и есть. У меня была проблема в том, что все media queries отключались менне 500px и эту проблему ничего не решало. Я просто убрал нижнюю планку у media queries и все заработало