Как правильно использовать Media Query, чтобы один столбец исчез, а другой - по ширине экрана? - PullRequest
Новая
       11

Как правильно использовать Media Query, чтобы один столбец исчез, а другой - по ширине экрана?

0 голосов
/ 02 ноября 2018

В моем классе мы начинаем использовать медиазапросы, и у меня возникли небольшие проблемы с заданием. Для предыдущего задания нам было поручено переделать веб-сайт под названием «Тост» как можно лучше, что у меня есть здесь . Теперь для этого задания нам нужно использовать медиа-запрос, чтобы сделать несколько вещей:

Это задание посвящено медийным запросам и созданию вашего сайта. отзывчивый. Мы будем использовать сайт Тост снова для этого назначение. Вы будете выкладывать две колонки для области контента. Когда размер экрана достигает 960 пикселей, правый столбец должен исчезнуть. Статьи в левом столбце должны соответствовать ширине экрана. Изображения должны стать больше и заполнить статью в 960 пикселей.

При 760 пикс. Кнопка «Поддержи нас», текст тоста и социальная сеть СМИ должны исчезнуть.

В коде у меня есть два столбца, "bigColumn" и "adColumn". Теперь, насколько я понимаю, чтобы столбец рекламы исчез и изменил значение BigColumn, я просто должен добавить: 

@media only screen and (max-width: 960px) {

  .main {

    .bigColumn {
      width: 100%;
    }

    .adColumn {
      display: none;
    }
  }
}

Однако это не работает. Реклама никогда не исчезает, а остальная часть контента не делает ничего с точки зрения заполнения остальной части страницы при уменьшении окна. Если я изменю цвет фона в .main, цвет изменится, но изменение чего-либо в двух элементах div не окажет никакого эффекта, который я вижу. Я могу заставить иконки социальных сетей исчезать на 760px просто отлично, так что я что-то упускаю в медиа-запросе для столбцов? Или что-то еще может мешать этому?

РЕДАКТИРОВАТЬ: Думаю, я должен упомянуть, что да, я действительно использую SASS в проекте. Вот стиль, который у меня есть для столбцов до того, как я начал медиа-запрос: 

.main {
  width: 90%;
  display: flex;
  min-height: 200px;
  margin: 0 auto;
//column for main-page content
  .bigColumn {
    width: 800px;
    height: 100%;
    margin-top: 20px;
    margin-right: 9%;
    margin-left: 13%;
    }
.adColumn {
    margin-top: 20px;
    position: relative;
    min-height: 120px;

  }
}

Ответы [ 2 ]

0 голосов
/ 02 ноября 2018

Исходя из вашего css, я думаю, вы близки, но, похоже, произошла ошибка в том, как вы структурировали свой css. Дайте это попробовать. Я предполагаю, что .bigColumn и .adColumn являются детьми .main: 

/* All screens 960px or less */
@media only screen and (max-width: 960px) { 
    .main .bigColumn {
      width: 100%;
    }

    .main .adColumn {
      display: none;
    }
}
0 голосов
/ 02 ноября 2018

Я не верю, что вы можете так вложить свой CSS, если вы не используете препроцессор, такой как LESS или SASS. Попробуйте извлечь CSS-код .bigColumn из скобок .main и оставить его отдельно. 

@media only screen and (max-width: 960px) {

  .bigColumn {
     width: 100%;
   }

   .adColumn {
      display: none;
   }

}
...