Медиа-запрос неправильно отображается в Shopify
Я хотел изменить то, как мой сайт отображает мои продукты на мобильном устройстве. Стандартно он отображал один элемент в строке, и я хотел показать два элемента в строке.
Для этого я использовал следующий CSS:
@media only screen and (max-width: 600px) {
.product-item{
width: 50%;
}
}Я тестировал инструменты браузера Chrome и Firefox, и он отлично работал в мобильном представлении.
На реальном телефоне белые пробелы и иногда всего 1 пункт в строке.
Кто-нибудь может помочь? Адрес моего веб-сайта: https://blupstore.com/
Обновление: скриншот того, что происходит https://ibb.co/HpnhVcw
iPhone 6 с использованием Safari и Firefox. iPhone X в сафари
ваша проблема только на iPhone 6, который я тестировал с другими устройствами, и он работает нормально
Хорошо, спасибо, я нацелюсь на это устройство
Ответы 3
В вашем коде отсутствует это:
<meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1" />
- Без области просмотра некоторые мобильные браузеры не будут корректно отображать вашу страницу.
- Позаботьтесь о том, чтобы все классы или идентификаторы, которые вы хотите использовать, были объявлены корректно. для каждого устройства.
- добавить медиа-запросы для устройств, которые вы хотите поддерживать, этот список с css-tricks.com может быть полезен: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
если вы хотите выровнять все в правильной строке, классам в конечном итоге потребуется объявление с плавающей запятой:
@media only screen and (max-width:600px) {
.product-item{
float : left;
width: 50%;
}
}
Если вы получаете пробелы, которых не должно быть, есть очень простое решение:
*{
margin : 0 ;
padding : 0 ;
}
Ваш css также страдает некоторыми ошибками синтаксического анализа, которые также могут привести к некоторым ошибки. Вот тест единорога вашего магазина: https://validator.w3.org/unicorn/check?ucn_uri=https%3A%2F%2Fblupstore.com%2F&ucn_task=conformance#
Спасибо за подробный ответ. Я добавил мета, изменил медиа-запрос и попробовал с полями/отступами и без них. Проблема все еще остается :( Означает ли это, что он никогда не будет работать, пока ошибки синтаксического анализа не будут исправлены?
Чтобы избежать ошибок отображения, это лучший способ исправить ошибки синтаксического анализа. Вы также можете проверить весь css на наличие классов, которые объявлены несколько раз для одного и того же разрешения, это тоже может привести к ошибкам.
Я нашел временное решение. Я использовал:
@media only screen and (max-width:600px) {
.product-item{
float : left !important;
width: 50% !important;
border: red solid;
box-sizing:border-box
}
}Я мог видеть, что первый элемент испортил макет. Я удалил его из категории и снова добавил внизу. Это ни в коем случае не исправление, но это хорошее решение для исправления отображения, пока я исправляю ошибки синтаксического анализа.
Это было бы невозможно без помощи @Thorsten Wolske и @Nikhil Gangurde.
Вы можете добавить стиль css.
@media only screen and (max-width:600px) {
.product-item:nth-child(2n+1) {
clear: left !important;
}
}
на каком устройстве вы тестировали