html - 如何使媒体查询包装我的 div?

标签 html css shopify

我正在运行 Shopify Debut 主题。我正在尝试编辑 Hero 部分,这是一个带有背景图像的文本叠加层。

我创建了两个 div,我可以将它们并排放置。但是,当我将屏幕尺寸缩小到移动设备时,右侧的 div 就被推离了屏幕。

每个 div 都有一个媒体查询(来自 shopify 主题)。我想我需要对此进行编辑以更改 div 的显示类型,但我不确定。你能建议吗?我在 jfiddle 中精简了代码。

  @include media-query($small) {
max-width: $width-site;
padding-left: $gutter-site-mobile;
padding-right: $gutter-site-mobile;}

详情见 fiddle : https://jsfiddle.net/tulanejosh/dj7cskpp/1/

谢谢!

最佳答案

这不是 css,它是 sass/scss .. 所以你的媒体查询不能工作,因为 $small 没有定义

你应该贴出编译好的css

关于html - 如何使媒体查询包装我的 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48540552/

相关文章:

shopify - 在 Shopify 中更新/删除购物车属性

html - 如何在 Spring <form :input> tag on jsp page 中使用占位符 HTML

java - 我需要帮助在 selenium Java 中查找 Web 元素

javascript - Shopify 'View all' 按钮实现

html - 带有页眉和页脚的静态侧边栏和流动内容

javascript - 如何让微调器在 url 加载后消失

javascript - SHOPIFY:如何根据特定变体显示 div

javascript - Jquery Tabs 跳跃和高度

html - 如何在不影响页面设计的情况下排列div

html - CSS/HTML 屏幕尺寸自适应 block /图 block