Медиа-запрос не отображается правильно на Shopify - PullRequest
Новая
       18

Медиа-запрос не отображается правильно на Shopify

0 голосов
/ 28 июня 2019

Я хотел изменить, как мой сайт отображает мои продукты на мобильном устройстве.Как правило, он отображал один элемент в строке, и я хотел показать два элемента в строке.

Я использовал следующий CSS-код, чтобы добиться этого: 

@media only screen and (max-width: 600px) {
.product-item{
  width: 50%;
}
}

Я тестировал в браузерных инструментах Chrome и Firefox, и, похоже, он отлично работает на мобильном телефоне.

На реальном телефоне есть белые пробелы, а иногда и только1 элемент в строке.

Кто-нибудь может помочь?URL моего сайта: https://blupstore.com/

Обновление: скриншот того, что происходит https://ibb.co/HpnhVcw

Ответы [ 3 ]

0 голосов
/ 28 июня 2019

Я нашел временное исправление.Я использовал: 

@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

0 голосов
/ 03 июля 2019

Вы можете добавить стиль CSS. 

@media only screen and (max-width:600px) {
 .product-item:nth-child(2n+1) {
   clear: left !important;
 }
}
0 голосов
/ 28 июня 2019

Ваш код отсутствует: 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  • Без окна просмотра некоторые мобильные браузеры не будут отображать вашу страницу правильно.
  • Позаботьтесь о том, чтобы все классы или идентификаторы были такими, какие вы хотите.reponsive являются corret объявленными для каждого устройства.
  • добавьте медиа-запросы для устройств, которые вы хотите поддерживать, этот список с css-tricks.com может быть полезен: https://css -tricks.com / snippets / css/ media-query-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#

...