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

Question

[FIKSER]

Собственно САБЖ.

Хочу убрать этот элемент.
Для этого в CSS дописал:

.block2 .container {
    padding-bottom: 80px;
}

.block2 .container:after {
    position: absolute;
    bottom: 0;
    left: -311px;
    content: "";
    background-image: url(../images/bg/bg2.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    width: 476px;
    height: 515px;
}
/////////////// Здесь  указываю максимальный размер ширины экрана в пикселях, при котором элемент не будет показываться.
@media screen and (max-width: 600px) {
.block2 .container:after {
visibility: hidden;
display: none;
}
}

Но данный вариант не работает.В чем ошибка?

Answer 1

[Александр]

добавьте в head

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

Comments

[FIKSER]

Помогло, но нарушилась адаптация сайта...

[Александр]

FIKSER, почитайте здесьhttps://developer.mozilla.org/ru/docs/Mozilla/Mobi... и вообще про vieport и initial-scale, особенно для устройств apple, они, как и IE, ведут себя неадекватно по сравнению с остальными

[alex-1917]

Александр, с чего бы это яблоки ведут себя неадекватно?)) сами видели или нагуглили?))))
Автор! Юзай для теста реальные устройства, а не поделки в виде эмуляторов. И разжуй, как именно нарушилась некая адаптация?)))

[Ankhena]

alex-1917, последний пример неадекватности: Как убрать баг инпута на iPhone? и эти вопросы повторяются через день

И разжуй, как именно нарушилась некая адаптация?

Если не был указан meta viewport или был указан неверно, то логично, что при его установке способы расчета и/или масштабирования изменились.

[alex-1917]

Ankhena, разжуй - это было к автору

[FIKSER]

Александр, не работает что то. С телефона посмотрел, эти элемента на месте...

[FIKSER]

alex-1917,
Текст криво показывается на Iphone. На других телефонах все нормально.

[alex-1917]

у 4, 5, и 6 разные точки срабатывания, не забывай!!))
4s 320-480
5s 320-568
6 375-667
6Plus 414-736
Т.е. для твоей странной цифры 600px будет много неоднозначного)))

[FIKSER]

alex-1917, на 5-ке некорректно отображает текст в одном блоке. Может его можно скрыть в моб. версии?

[alex-1917]

FIKSER, в каком одном блоке? Не пойму, у нас тут почасовой практикум с использованием видеоконференции что ли? Скорее всего у тебя есть еще медиазапросы, на упомянутый тобою "один блок", просто ты про них ни сном ни духом, вот они и корявят все.

[FIKSER]

alex-1917, есть Telegram?

[alex-1917]

FIKSER, нет. только спутниковый телефон. я щас на южном полюсе, загораю.