列在移动设备上消失

Question

我正在使用此代码为我的网站创建 4 个响应列，如果我尝试运行 Tryit 编辑器上的代码，它可以完美运行，但是当我在我的 shopify 主页上使用它时，我尝试调整 window 的大小，列消失（在智能手机上也是如此）。代码中可能有什么问题？

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Container for flexboxes */
.row {
  display: flex;
  flex-wrap: wrap;
}

/* Create four equal columns */
.column {
  flex: 25%;
  padding: 20px;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
    flex: 50%;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }
}

@media only screen and (max-width: 767px) {
    body {
        text-align: center;
    }
}


</style>
</head>

<body>

<div class="row">
  <div class="column" style="background-color:transparent;">
    <p style="color:#f8f8ff;font-size:1em"><strong>COLUMN1</strong>
    <p style="font-size:0.9em;">Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
  </div>
  
  <div class="column" style="background-color:transparent;">
    <p style="color:#f8f8ff;font-size:1em"><strong>COLUMN2</strong>
    <p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
  </div>
  
  <div class="column" style="background-color:transparent;">
    <p style="color:#f8f8ff;font-size:1em"><strong>COLUMN3</strong>
    <p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
  </div>
  
  <div class="column" style="background-color:transparent;">
    <p style="color:#f8f8ff;font-size:1em"><strong>COLUMN4</strong>
    <p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
  </div>
</div>

</body>
</html>

Answer 1

这是因为 CSS 您的主题重叠。某些 CSS 与您的此页面重叠 CSS 在您的 CSS 中使用“!important” 它将完美运行。

在下面使用 CSS 代码：-

<style>
* {
  box-sizing: border-box !important;
}

/* Container for flexboxes */
.row {
  display: flex !important;
  flex-wrap: wrap !important;
}

/* Create four equal columns */
.column {
  flex: 25% !important;
  padding: 20px !important;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
    flex: 50% !important;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column !important;
  }
}

@media only screen and (max-width: 767px) {
    body {
        text-align: center !important;
    }
}


</style>

列在移动设备上消失

Column disappears on mobile

html

css

shopify

responsive