Как адаптировать сайт под мобильные устройства?

Question

[Pavel2345]

Как сделать адаптивную верстку сайта? Работаю через media-запросы. Сделал под разрешение 400px(для айфонов и других маленьких устройств). На моём андроиде на 720 выглядит так:


Разрешение все равно больше нужного. Прописывал в body｛min-width: 400px｝, все равно не работает. В общем как это исправить?

Comments

[Антон Литвиненко]

а вьюпорт прописал в шапке?

[Pavel2345]

Антон Литвиненко, да прописал. До этого вообще не работало. Ширину каждого блока я прописывал отдельно(задавал значение 400px). Может в этом все дело?

Answer 1

[Анатолий]

в head вставь viewport, где ширине присвой значение device-width (устанавливает ширину страницы, равную ширине экрана устройства).

<meta name="viewport" content="width=device-width, initial-scale=1">

Comments

[Pavel2345]

да, проставил. Вот кусочек кода:

/* Small Devices, Tablets */
@media only screen and (max-width: 768px) {

    /* Pochiv chexlov luboi slojnosti */
    #u830-6 {
        z-index: 667;
        width: 400px;
        min-height: 270px;
        text-shadow: 0px 0px 4px #ED1C24, 0px 0px 4px #ED1C24;
        -pie-box-shadow: none;
        box-shadow: none;
        background-color: transparent;
        font-size: 30px;
        line-height: 40px;
        font-family: roboto, sans-serif;
        font-weight: 400;
        position: relative;
        margin-top: 376px;
        text-align: center;
    }
}

Может здесь ширину блока не указывать или как?

[Анатолий]

Pavel2345, значит у тебя какой-то блок ширину не меняет. Посмотри с ПК, у тебя при 400px появится скролл, в инспекторе найдёшь нужный блок.