Question

我想更改网站在移动设备上显示产品的方式。作为标准，它每行显示一个项目，而我想每行显示两个项目。

我使用以下CSS实现了这一点：

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

我在chrome和firefox浏览器工具中进行了测试，在移动视图上似乎可以正常工作。

在真实的电话上存在空白，有时每行只有一个空白。

有人可以帮忙吗？我的网站网址是：https://blupstore.com/

更新：https://ibb.co/HpnhVcw

的屏幕截图

Answer 1

您的代码缺少此信息：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

没有视口，某些移动浏览器将无法正确显示您的页面。
请确保正确声明要响应的所有类或ID 每个设备。
添加要查询的设备的媒体查询，来自css-tricks.com的此列表可能会有所帮助： https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

如果您想将所有内容对齐到正确的行中，则类最终需要一个float声明：

@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#

Answer 2

我找到了一个临时修复程序。我用过：

@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的帮助，这是不可能的

Answer 3

您可以添加一些CSS样式。

@media only screen and (max-width:600px) {
 .product-item:nth-child(2n+1) {
   clear: left !important;
 }
}

媒体查询在Shopify上无法正确显示

3 个答案: