时间戳

首页 > 解决方案 > CSS边距编辑弄乱了移动网站

css - CSS边距编辑弄乱了移动网站

问题描述

我一直在尝试将我们产品页面的特定内容移到 Shopify 上。我将页面上的一个按钮移到了左上角。在我们的 theme.scss 中插入的用于按钮新定位的代码是：

.btn--secondary{
position:absolute;
left:228px;
top:40px;
font-size: 8px;
padding: 10px 32px;
margin-bottom: 350px;

}

我还更改了产品图片和标题的边距：

    .product-single__media {
      margin-top: 50px;
      min-height: 1px;
      width: 100%;
      height: 100%;
      position: relative; }
        .product-single__media iframe,
        .product-single__media model-viewer,
        .product-single__media .shopify-model-viewer-ui,
        .product-single__media img,
        .product-single__media > video,
        .product-single__media .plyr,
        .product-single__media .media-item {



      .product-single__title {
        margin-bottom: 0.5rem;
        margin-top: 50px;}

这些变化使网站的移动版本完全中断了一半。有什么办法可以解决这个问题，使移动版本看起来与桌面版本相同？

标签： cssshopifycss-positionmarginpositioning

解决方案

推荐阅读