时间戳

首页 > 解决方案 > 试图在 CSS 中编写关于 Turbo 主题/Shopify 的媒体查询但它不起作用？

css - 试图在 CSS 中编写关于 Turbo 主题/Shopify 的媒体查询但它不起作用？

问题描述

这里的代码非常新，但试图在新网站上整理一些图像，似乎无法让媒体查询正常工作。

我正在使用沙盒外的 Turbo 主题，它允许您在元素中输入自定义 CSS。

@media only screen and (min-device-width : 768px) {
    .OVDGF-logos { width: 10%; }
}

我只是随机使用 10% 来查看是否发生了变化，但它没有任何区别。

该媒体查询是否正确编写？这是元素的图片：

标签： cssshopify

解决方案

您需要创建一个单独的 CSS 文件并将其包含在“theme.liquid”文件或相应的模板中。

@media only screen and (max-width:768px) {
  .OVDGF-logos{
    width: 50% !important;
  }
 }

根据他们的常见问题解答，自定义 CSS 字段将只接受 CSS。它不接受 SCSS/SASS 或媒体查询和混合。

参考：https ://help.outofthesandbox.com/hc/en-us/articles/360022329373-Custom-CSS-Feature-Flex-and-Turbo-Themes

推荐阅读