Шаблон столбца сетки ломается, когда ширина <500 пикселей
Все работает в ландшафтном режиме, выводит вот так:
value#1 value#2 value#3
Но когда ширина экрана < 500 пикселей, это выглядит так:
value#1 value#2value#3
И нет, это не проблема ширины, которую я пробовал.
.cafe-outputs {
display: grid;
position: relative;
max-height: 50vh;
overflow-y: scroll;
padding: 0.5rem;
top: 2rem;
grid-template-columns: repeat(3, 1fr);
}
.cafe-outputs p {
color: black;
margin: 0 5rem;
padding: 1rem;
white-space: nowrap;
}
@media (max-width: 500px) {
.cafe-outputs p {
font-size: 1rem !important;
padding: 0rem;
margin: 0 auto;
}
} <div class = "cafe-outputs">
<div class = "cafe-quantity"> <p>1</p>
</div>
<div class = "cafe-items"> <p>Orange Juice</p>
</div>
<div class = "cafe-price">
<p>5</p>
</div>
</div>Какие-либо предложения? Я пробовал отлаживать много раз, но я не могу найти проблему. Он работает с другими входными/выходными значениями, когда столбцы> 4
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
1
35
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Похоже, у вас есть 2 шаблона сетки-столбца на вашем css. удалите один, затем измените его на авто авто авто. Я также добавил выходы кафе в ваш медиазвонок, чтобы он равномерно распределялся на мобильных устройствах. Дай мне знать.
.cafe-outputs {
display: grid;
position: relative;
max-height: 50vh;
overflow-y: scroll;
padding: 0.5rem;
top: 2rem;
grid-template-columns: auto auto auto;
}
.cafe-outputs p {
color: black;
margin: 0 5rem;
padding: 1rem;
}
@media (max-width: 500px) {
.cafe-outputs p {
font-size: 1rem !important;
padding: 0rem;
margin: 0 auto;
}
.cafe-outputs {
padding: 0rem;
justify-content:space-evenly;
}
}<div class = "cafe-outputs">
<div class = "cafe-quantity"> <p>1</p>
</div>
<div class = "cafe-items"> <p>Orange Juice</p>
</div>
<div class = "cafe-price">
<p>5</p>
</div>
</div>Другие вопросы по теме
Выравнивание элементов по горизонтали в братьях и сестрах без изменения структуры html
Как разместить элементы одного класса в столбце и разных строках с сеткой css?
Поместите кнопку справа от каждой строки с помощью overflow-x
Элемент, касающийся края экрана на мобильном устройстве (Material UI)
HTML не отображается должным образом в Flask, Python
Позволяет столбцам CSS Grid быть короче, чем Grid Gap, чтобы предотвратить переполнение
Флекс-боксы перекрываются в столбце направления
Как добавить задержку внутри функции в Javascript
Как добавить стили в угловой компонент? (каждый второй элемент)
Проверка HTML .value не работает должным образом
Похожие вопросы
Элемент <a> появляется внутри, хотя я поместил его снаружи
Выравнивание элементов по горизонтали в братьях и сестрах без изменения структуры html
Как разместить элементы одного класса в столбце и разных строках с сеткой css?
Почему второе изображение не помещается в правильное положение в html и Javascipt?
Поместите кнопку справа от каждой строки с помощью overflow-x
Не удается разобрать текст, который находится за </span>text</a> в Beautifulsoup
Запретить обновление страницы после оповещения
Генерация элементов списка из массива с помощью Javascript
HTML не отображается должным образом в Flask, Python
Флекс-боксы перекрываются в столбце направления
Расстояние при вращении устройства нормальное для «1» и «Апельсиновый сок», но не для «5».