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

Question

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

这里是我在页脚主题自定义设置中的自定义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>

这是我的网站 url https://sacredcoffeeco.com。感谢您的帮助！

Answer 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;
   }
}

Answer 2

为 img 标签使用以下 css 属性

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

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

Proper display of footer elements in mobile view?

html

css

liquid

shopify

shopify-template