Проблемы с адаптивными столбцами

Надеюсь, кто-нибудь может мне помочь.

Я пытаюсь разделить текст на 3 столбца на экране ноутбука, на 2 столбца для планшета и на 1 столбец для телефона.

Я использую приведенный ниже код, и он хорошо работает для 3 столбцов, но не работает отзывчивый бит, есть идеи, как это исправить?

.about находится внутри контейнера

Спасибо большое!!!

.container {
  display: flex;
  align-items: center;

}


.about {

  columns: 3;
  column-fill: balance-all;
  column-gap: 1.5em;
  padding: 2em 4em;
  font: 1em/1.2 "special elite", serif;
  hyphens: auto;
  text-align: center;
  color: black;

}

@media only screen and (max-width: 810px) {
  .about {
    columns: 2;
  }
}

можете ли вы предоставить HTML, связанный с CSS, для создания минимальный воспроизводимый пример?

Sigurd Mazanti 17.05.2022 13:43
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
Современные подходы к организации и работе с CSS в проекте
Современные подходы к организации и работе с CSS в проекте
Любой, кто писал CSS в течение некоторого времени, знает о сложностях, которые с этим связаны, и о том, насколько это может быть болезненно.
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Я люблю Tailwind. Раньше я относился к нему с подозрением, но как только я попробовал его использовать, я был поражен тем, сколько времени он мне...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
Поговорим о глассморфизме (Glassmorphism)
Поговорим о глассморфизме (Glassmorphism)
В 2021 году Glassmorphism был огромным трендом в веб-дизайне. Я всегда люблю размытость в UI / UX, она делает пользовательский интерфейс более богатым...
0
1
23
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

CSS, которым вы поделились, полностью в порядке, но я предпочитаю, чтобы вы пытались использовать количество столбцов вместо столбцов.

Спасибо

Почему-то не работает. не уверен, почему.

Victor Torres 17.05.2022 14:24

Я нашел ответ. Я добавил следующую строку в @media: height: max-content; и это сработало, как и ожидалось! Спасибо большое!!

Victor Torres 17.05.2022 14:38

Я добавил медиа-запрос для мобильных устройств и обновленный медиа-запрос для планшетов.

.container {
  display: flex;
  align-items: center;

}

.about {
  columns: 3;
  column-fill: balance-all;
  column-gap: 1.5em;
  padding: 2em 4em;
  font: 1em/1.2 "special elite", serif;
  hyphens: auto;
  text-align: center;
  color: black;

}

/*Tablet CSS*/
@media only screen and (max-width: 992px) {
  .about {
    columns: 2;
  }
}

/*Mobile CSS*/
@media only screen and (max-width: 767px) {
  .about {
    columns: 1;
  }
}
    <div class="about">
        
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

    </div>

Другие вопросы по теме