div-ы друг под другом в мобильной версии

Question

Есть такой код для 3-х блоков в ряд в компьютерной версии. Как сделать их друг под другом в мобильной версии?

css

.wrapper, .other {
  display: inline-block;
}

.wrapper {
  width: 80%;
}

.block {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.block div {
  flex-basis: 25%;
  height: 80px;
  margin: 10px;
  background-color: #ff9700;
}

.other {
  display: inline-block;
  width: 18%;
  height: 40px;
  background-color: purple;
}

html

<div class="wrapper">
  <div class="block">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

Answer 1

.wrapper,
.other {
  display: inline-block;
}

.wrapper {
  width: 80%;
}

.block {
  display: flex;
  /*
  justify-content: space-around;
  flex-wrap: wrap;
  */
  flex-direction: column;
}

.block div {
  /*
  flex-basis: 25%;
  */
  height: 80px;
  margin: 10px;
  background-color: #ff9700;
}

.other {
  display: inline-block;
  width: 18%;
  height: 40px;
  background-color: purple;
}

<div class="wrapper">
  <div class="block">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

Answer 2

/*Медиа запросы в файле style.css*/
@media  screen and (max-width: 1200px){
/*Здесь пишешь стили для экрана меньше 1200px и т.д.*/
}

Answer 3

Чтобы стили менялись в зависимости от ширины экрана - нужно использовать "media query's". Синтаксис выглядит так:

.my-class {
    width: 20%; // значение по умолчанию
}

// Если ширина экрана меньше 992px
@media screen and (max-width: 992px) {
    .my-class {
        width: 100%; // Значение при маленьком экране
    }
    // Тут еще классы, которые должны поменяться
}

Если нужно разместить 3 блока в ряд на компьютерной версии и в колонку на мобильной (пусть мобильная - это меньше 992px), то воспользуемся flex'ами и функцией calc, чтобы разделить 100% на 3:

html

<div class="block">
    <div class="block__element"></div>
    <div class="block__element"></div>
    <div class="block__element"></div>
</div>

css

.block {
    display: flex;
    // По умолчанию flex не переносит элементы, нужен flex-wrap
    flex-wrap: wrap;
}

.block__element {
    // Так как у нас 3 элемента - ширина каждого будет (100% / 3 ~ 33.(3)%)
    width: calc(100% / 3);
}

@media screen and (max-width: 992px) {
    // Переопределяем ширину на 100%, flex сам сбросит их в один столбик
    .block__element {
        width: 100%;
    }
}

БЛОГ НА HUSL

div-ы друг под другом в мобильной версии

Ответы (3 шт):