Shopify - 页脚菜单 (div) 在移动设备上不低于彼此？

Posted 2023-03-21

【中文标题】Shopify - 页脚菜单 (div) 在移动设备上不低于彼此？

【英文标题】：Shopify - footer menus (divs) not falling below each other on a mobile?

【发布时间】：2017-04-05 16:16:41

【问题描述】：

我使用的是 shopify 主题“Supply”并编辑了我的页脚代码，使其拥有 4 个菜单 (div) 而不是 3 个。但是现在当我压缩我的页面以查看它在移动设备/iPad 上的外观时，页脚菜单没有'不属于彼此，他们只是一起挤在一起。

您知道我该如何解决这个问题，以便页脚菜单相互重叠，但我可以拥有 4 个菜单吗？

编辑 CSS 截图后我的页脚：https://postimg.org/image/ssnzk93i7/

我正在使用 shopify 免费供应主题：http://supply-electronics.myshopify.com/

我复制了第一个页脚块中的代码以创建页脚菜单 3（以支持为荣），并为其提供了自己的类“大--三-自定义”并使用了“sn-p”，放置在我想要的位置要去的新街区：

% include 'custom-snippet.liquid' %

然后我通过在 theme.liquid 中的结束头标签 </head> 之前添加以下代码来编辑 CSS：

'custom-styles.css' | asset_url | stylesheet_tag

然后在 Assets 中创建了一个空白的 custom-styles.css.liquid，我在其中添加了以下 CSS。

我在此 CSS 代码中更改了页脚块的 % 值以适应页面宽度（在只有 3 个页脚菜单的原始主题中，它们在移动设备或 ipad 上彼此很好）

/*footer block 1*/
.large--three-twelfths 
width: 21%;


/*footer block 2*/
.large--five-twelfths 
width: 23%;


/*footer block 3*/
.large--three-custom 
width: 27%;



/*footer block 4*/
.large--one-third 
width: 29%;

你知道我该如何解决这个问题吗？

【参考方案1】：

这类问题有很多案例。 1) html 标签未正确关闭，2) jquery 冲突，3) css 问题。 可能适用于移动设备/ipad，某些脚本无法正常工作。 检查浏览器的控制台选项卡，可能有一些javascript错误。