Apply more specificity, conditionally apply styles.

Shopify · Jun 17, 2022 · 85ea51c · 85ea51c
1 parent 212b901
commit 85ea51c
Showing 1 changed file with 7 additions and 3 deletions.
diff --git a/sections/main-collection-banner.liquid b/sections/main-collection-banner.liquid
@@ -7,12 +7,16 @@
     padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
   }
 
+  {%- if section.settings.padding_top != 0 or section.settings.padding_bottom != 0 -%}
   @media screen and (min-width: 750px) {
-    .section-{{ section.id }}-padding {
-      padding-top: {{ section.settings.padding_top }}px;
-      padding-bottom: {{ section.settings.padding_bottom }}px;
+    .section-{{ section.id }}-padding,
+    .collection-hero--with-image.section-{{ section.id }}-padding {
+      {%- if section.settings.padding_top != 0 -%}padding-top: {{ section.settings.padding_top }}px;{%- endif -%}
+      {%- if section.settings.padding_bottom != 0 -%}padding-bottom: {{ section.settings.padding_bottom }}px;{%- endif -%}
     }
   }
+  {%- endif -%}
+
   @media screen and (max-width: 749px) {
     .collection-hero--with-image .collection-hero__inner {
       padding-bottom: calc({{ settings.media_shadow_vertical_offset | at_least: 0 }}px + 2rem);