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

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>

这是我的网站网址https://sacredcoffeeco.com。谢谢你的帮助！

标签： htmlcssshopifyliquidshopify-template

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