在移动视图中正确显示页脚元素？答案

【问题标题】：Proper display of footer elements in mobile view?在移动视图中正确显示页脚元素？
【发布时间】：2021-04-27 15:07:36
【问题描述】：

我无法在移动屏幕尺寸的页脚中定位图像。在浏览器上看起来不错，但在手机上图片在底部被截断，版权在带有徽章的图片上方。

这是我在页脚主题自定义设置中自定义html块中使用的css：

    <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。感谢您的帮助！

【问题讨论】：

标签： html css shopify liquid shopify-template

【解决方案1】：

使用代码，如果与现有 CSS 有任何冲突，请进行更改。

@media screen and ( max-width:749px ){
   /* hide the last line and hr */
   footer .page-width:last-child,.site-footer__hr {
      display: none;
   }
   .site-footer__content {
      height: auto;padding: 0;
   }
   .site-footer__item-inner.site-footer__item-inner--html_content {
      display: flex;
      flex-direction: column;
   }
   .site-footer__item-inner.site-footer__item-inner--html_content div:first-child {
      order: 1;
   }
}

【讨论】：

感谢您的帮助！

【解决方案2】：

为 img 标签使用以下 css 属性

img{
      max-width: 100%;
      height: auto;
 }

【讨论】：