移动端页脚元素规范显示：Shopify页脚图片裁切、版权错位修复

问题现状 #

• 桌面端浏览器访问时，页脚展示效果完全符合设计预期
• 移动端窄屏访问时存在两处明显布局异常：
  • 页脚插入的认证图标图片底部被裁切，内容显示不完整
  • 版权文字错位浮动到带认证徽章的图片上方，整体排版逻辑混乱

当前使用的自定义代码 #

目前代码直接配置在主题编辑器的自定义HTML区块中，原始代码如下：

<div>
  <img 
    src="https://cdn.shopify.com/s/files/1/0449/8210/8310/files/Sacred-Footer-layout-icons.jpg?v=1611374743" 
    style="position: relative; right: 0px; width: 400px; padding: 0px;"
  >
</div>
<div style="text-align: center !important;">
  <small>
    © 2021 Sacred Coffee Co.
  </small>
</div>

效果对照参考 #

• 达标展示：
  
  桌面端视图效果符合设计预期，无布局异常
• 异常展示：
  
  移动端可见图片被裁切、版权文字错位在图片上方的问题
• 涉及的站点线上地址：https://sacredcoffeeco.com

问题成因 #

• 图片样式写死width: 400px的固定宽度，没有做响应式适配，当移动端屏幕宽度小于400px时，图片会超出父容器的可展示宽度，被容器默认的溢出裁切规则截断边缘内容
• 原有代码没有对两个块级元素的排布顺序做固定约束，窄屏下图片宽度溢出后，布局逻辑被主题自带的移动端默认样式打乱，最终出现文字跑到图片上方的错位问题

可直接替换的修复代码 #

将原有自定义HTML区块的代码替换为以下内容即可解决全部异常，核心做了响应式适配和布局顺序固定：

<div style="display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; padding: 0 16px;">
  <img 
    src="https://cdn.shopify.com/s/files/1/0449/8210/8310/files/Sacred-Footer-layout-icons.jpg?v=1611374743" 
    style="max-width: 100%; height: auto; margin: 0 auto; padding: 0;"
  >
  <div style="text-align: center;">
    <small>© 2021 Sacred Coffee Co.</small>
  </div>
</div>

改动说明 #

• 外层容器设置垂直方向的弹性布局，固定「图片在上、版权文字在下」的排布顺序，从根源避免文字错位到图片上方的问题
• 图片的固定宽度替换为max-width: 100%搭配height: auto规则，移动端窄屏时图片会自动等比缩小，不会超出容器宽度被裁切
• 移除原样式中不必要的!important强制对齐规则，配合容器的居中对齐属性，保证桌面端和移动端的元素都能居中展示，和原有设计效果保持一致

内容的提问来源于stack exchange，提问作者Inmana00