Add page-width wrapper to rich text section (#564)

Shopify · Sep 3, 2021 · 2e74d84 · 2e74d84
1 parent c3dfe28
commit 2e74d84
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 22 deletions.
diff --git a/assets/section-rich-text.css b/assets/section-rich-text.css
@@ -1,9 +1,6 @@
 .rich-text {
   margin: auto;
-  max-width: 110rem;
   text-align: center;
-  /* 1.5rem margin on left & right */
-  width: calc(100% - 3rem);
 }
 
 .rich-text.rich-text--full-width {
@@ -38,11 +35,6 @@
 }
 
 @media screen and (min-width: 750px) {
-  .rich-text {
-    /* 5rem margin on left & right */
-    width: calc(100% - 10rem);
-  }
-
   .rich-text__blocks {
     max-width: 50rem;
   }

diff --git a/sections/rich-text.liquid b/sections/rich-text.liquid
@@ -4,20 +4,22 @@
 <noscript>{{ 'component-rte.css' | asset_url | stylesheet_tag }}</noscript>
 <noscript>{{ 'section-rich-text.css' | asset_url | stylesheet_tag }}</noscript>
 
-<div class="rich-text color-{{ section.settings.color_scheme }} gradient{% if section.settings.full_width %} rich-text--full-width{% endif %}">
-  <div class="rich-text__blocks">
-    {%- for block in section.blocks -%}
-      {%- case block.type -%}
-        {%- when 'heading' -%}
-          <h2 class="{{ block.settings.heading_size }}" {{ block.shopify_attributes }}>{{ block.settings.heading | escape }}</h2>
-        {%- when 'text' -%}
-          <div class="rich-text__text rte" {{ block.shopify_attributes }}>{{ block.settings.text }}</div>
-        {%- when 'button' -%}
-          <a{% if block.settings.button_link == blank %} aria-disabled="true"{% else %} href="{{ block.settings.button_link }}"{% endif %} class="button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}" {{ block.shopify_attributes }}>
-            {{ block.settings.button_label | escape }}
-          </a>
-      {%- endcase -%}
-    {%- endfor -%}
+<div class="{% unless section.settings.full_width %}page-width{% endunless %}">
+  <div class="rich-text color-{{ section.settings.color_scheme }} gradient{% if section.settings.full_width %} rich-text--full-width{% endif %}">
+    <div class="rich-text__blocks">
+      {%- for block in section.blocks -%}
+        {%- case block.type -%}
+          {%- when 'heading' -%}
+            <h2 class="{{ block.settings.heading_size }}" {{ block.shopify_attributes }}>{{ block.settings.heading | escape }}</h2>
+          {%- when 'text' -%}
+            <div class="rich-text__text rte" {{ block.shopify_attributes }}>{{ block.settings.text }}</div>
+          {%- when 'button' -%}
+            <a{% if block.settings.button_link == blank %} aria-disabled="true"{% else %} href="{{ block.settings.button_link }}"{% endif %} class="button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}" {{ block.shopify_attributes }}>
+              {{ block.settings.button_label | escape }}
+            </a>
+        {%- endcase -%}
+      {%- endfor -%}
+    </div>
   </div>
 </div>