如何让媒体查询包装我的 div？

【问题标题】：How do I make the media-query wrap my divs?如何让媒体查询包装我的 div？
【发布时间】：2018-01-31 11:01:22
【问题描述】：

我正在运行 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;}

谢谢！

【问题讨论】：

【解决方案1】：

这不是 css，它是 sass/scss .. 所以你的 mediaquery 不能工作，因为 $small 没有定义

你应该发布编译后的 css

【讨论】：

谢谢。我用完整的 scss 更新了 jfiddle。我添加的两个 div 是：
和
.一旦页面变为移动宽度，我只是想让它们堆叠起来。
你必须明白，你正在使用一个 CMS，它使用一个模板引擎（智能）..这个引擎替换你代码中的 vars ..例如´class="hero hero--{{ section.settings.hero_size }}{% if section.settings.title != blank or section.settings.text != blank or section.settings.button_label != blank %} hero__overlay{ % endif %} box ratio-container lazyload js"´ .. 看着你的小提琴，你可以猜到'hero hero--' 之后会是什么.. 你应该尝试隔离 RENDERED html 和 css，将其剥离一个新文件，因此您只有渲染的 CSS 和两个带有 wrapper-divs 的 div