Shopify自定义Liquid区块中如何在桌面端隐藏Div？

问题描述 #

我正在Shopify上搭建产品页面，使用自定义Liquid区块。我在区块内为桌面端制作了一个表格，效果良好，且已成功在移动端将其隐藏。现在制作了移动端版本，但尝试在桌面端隐藏它时完全失败了，是不是遗漏了什么？

原代码 #

<table class="table1">
<h6 class="perkstitle">Why Order From Us?</h6>
<tr> 
<td class="perksind">Guarneteed to ship within 24 business hours</td>
<td class="perksind"> Ships directly from the manufacturer</td>
<td class="perksind"> Live customer service <a href="tel:16109414333">610-941-4333</td>
</tr>
</table>

<div class="mobileonly">
<p class="columnm">Hello</p>
<p class="columnm">Hello</p>
<p class="columnm">Hello</p>
</div>


<style>

.table1 {
  margin-left: auto;
  margin-right: auto;
padding-bottom: 1px;
}

.mobileonly {
  margin-left: auto;
  margin-right: auto;
padding-bottom: 1px;
}

.perkstitle {
font-weight: 800;
font-size: 35px;
margin-top: 5px;
margin-bottom: 35px;
color:black;
font-family: roboto;
text-align: center;
}

.perksind   {
font-weight: 700;
font-size: 20px;
margin-top: 5px;
margin-bottom: 5px;
margin-left:10px;
margin-right:10px;
font-family: roboto;
color: white;
background-color: #d59e0d;
border: solid;
border-color: #F1F0F0;
border-width: 5px;
padding: 40px 20px 40px 20px;

}

.columnm   {
font-weight: 700;
font-size: 20px;
margin-top: 5px;
margin-bottom: 5px;
margin-left:10px;
margin-right:10px;
font-family: roboto;
color: white;
background-color: #d59e0d;
border: solid;
border-color: #F1F0F0;
border-width: 5px;
padding: 40px 20px 40px 20px;
text-align:center;
line-height: 1.4em;

}

a {

color: white;
}

 .color-accent-1{
background-color: #E6E6E6; !important;
}

@media only screen and (max-width: 749px) {
.table1 {
    display: none;
}

@media only screen and (min-width: 680px) {
.mobileonly {
  
  display: none;
  }


</style>

问题原因 #

1. 媒体查询未闭合：第一个移动端隐藏表格的@media代码块缺少闭合的}，导致后面的桌面端隐藏规则被嵌套在第一个媒体查询里，无法生效。
2. 断点区间重叠：你设置的移动端断点是max-width:749px，桌面端断点是min-width:680px，在680px-749px这个区间内，两个规则会冲突，导致显示异常。

修复后的代码 #

<table class="table1">
<h6 class="perkstitle">Why Order From Us?</h6>
<tr> 
<td class="perksind">Guarneteed to ship within 24 business hours</td>
<td class="perksind"> Ships directly from the manufacturer</td>
<td class="perksind"> Live customer service <a href="tel:16109414333">610-941-4333</a></td>
</tr>
</table>

<div class="mobileonly">
<p class="columnm">Hello</p>
<p class="columnm">Hello</p>
<p class="columnm">Hello</p>
</div>


<style>

.table1 {
  margin-left: auto;
  margin-right: auto;
padding-bottom: 1px;
}

.mobileonly {
  margin-left: auto;
  margin-right: auto;
padding-bottom: 1px;
}

.perkstitle {
font-weight: 800;
font-size: 35px;
margin-top: 5px;
margin-bottom: 35px;
color:black;
font-family: roboto;
text-align: center;
}

.perksind   {
font-weight: 700;
font-size: 20px;
margin-top: 5px;
margin-bottom: 5px;
margin-left:10px;
margin-right:10px;
font-family: roboto;
color: white;
background-color: #d59e0d;
border: solid;
border-color: #F1F0F0;
border-width: 5px;
padding: 40px 20px 40px 20px;

}

.columnm   {
font-weight: 700;
font-size: 20px;
margin-top: 5px;
margin-bottom: 5px;
margin-left:10px;
margin-right:10px;
font-family: roboto;
color: white;
background-color: #d59e0d;
border: solid;
border-color: #F1F0F0;
border-width: 5px;
padding: 40px 20px 40px 20px;
text-align:center;
line-height: 1.4em;

}

a {
color: white;
}

.color-accent-1{
background-color: #E6E6E6 !important;
}

/* 移动端隐藏桌面表格 */
@media only screen and (max-width: 749px) {
  .table1 {
    display: none;
  }
}

/* 桌面端隐藏移动端内容 */
@media only screen and (min-width: 750px) {
  .mobileonly {
    display: none;
  }
}

</style>

额外修复提示 #

• 补充了<a>标签的闭合：原代码中<a href="tel:16109414333">610-941-4333缺少</a>闭合，已修复。
• 调整了!important的位置：原代码中background-color: #E6E6E6; !important;写法错误，!important应该紧跟属性值，分号前，已修正。
• 统一断点为750px：避免区间重叠，确保在750px及以上显示桌面表格，隐藏移动端内容；749px及以下显示移动端内容，隐藏桌面表格。

内容的提问来源于stack exchange，提问作者John Williams