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

Question

[YANA]

Добрый день,
мне необходимо сверстать адаптивный сайт под 320px и 480px. (макеты во вложении)
При увеличении макета с 320 до 480px должен появляться рекламный баннер ( картинка справа с надписью "Adidas"), при уменьшении до 320px, соответственно, баннер должен пропадать.
Подскажите, пожалуйста,как это сделать.

Answer 1

[YANA]

dk-web dk-web и matperez matperez , спасибо за отклик.
я использую да :
media only screen and (max-width: 320px) {
баннер (id или класс) {
display:none;
Мне нужно сделать все это с помощью mobile first. Во вложении 2 картинки. Первая на 320 px. там все понятно. но при увеличении до 480px - у меня уезжают блоки сбоку и остается белое пространство, т.к. блок "Adidas" высокий.
Подскажите, пожалуйста, как исправить положении, как поправить код или переписать. (1 ый рисунок HTML код, 2ой рисунок CSS файл)

Comments

[matperez]

что вы имеете в виду под mobile first?
делайте сразу тут https://jsbin.com/ , тогда другим будет удобно вам помогать. не перепечатывать же ваш скриншот.

[dk-web]

VersLib посмотрите masonry скрипт.. сейчас сам его осваиваю... они динамически расставит блоки

Answer 2

[dk-web]

Очень просто:

@media only screen and (max-width: 320px) {
     баннер (id или класс) {
      display:none;
  }
}

Answer 3

[matperez]

Вам помогут media-queries. Пример из первой ссылки в поиске.

<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- CSS media query within a stylesheet -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>