Fix word breaks (#1271)

* Add word-break to headings * Remove usage of hyphens css property due to unpredictability * Change collection card heading to h3 style instead of h1
Shopify · Jan 26, 2022 · bafe4f3 · bafe4f3
1 parent 94c4a40
commit bafe4f3
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 4 deletions.
diff --git a/assets/base.css b/assets/base.css
@@ -386,6 +386,7 @@ h5,
   letter-spacing: calc(var(--font-heading-scale) * 0.06rem);
   color: rgb(var(--color-foreground));
   line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale)));
+  word-break: break-word;
 }
 
 .h0 {

diff --git a/assets/component-image-with-text.css b/assets/component-image-with-text.css
@@ -311,13 +311,11 @@
 
 .image-with-text__heading {
   word-break: break-word;
-  hyphens: auto;
   margin-bottom: 0;
 }
 
 .image-with-text__text p {
   word-break: break-word;
-  hyphens: auto;
   margin-top: 0;
   margin-bottom: 1rem;
 }

diff --git a/snippets/card-collection.liquid b/snippets/card-collection.liquid
@@ -61,7 +61,7 @@
       {%- endif -%}
       <div class="card__content">        
         <div class="card__information">
-          <h3 class="card__heading h1">
+          <h3 class="card__heading">
             <a href="{{ card_collection.url }}" class="full-unstyled-link">
               {%- if card_collection.title != blank -%}
                 {{- card_collection.title | escape -}}
@@ -82,7 +82,7 @@
     {% if settings.card_style == 'card' or card_collection.featured_image %} 
       <div class="card__content">
         <div class="card__information">
-          <h3 class="card__heading{% if card_collection.featured_image == nil %} h1{% endif %}">
+          <h3 class="card__heading">
             <a href="{{ card_collection.url }}" class="full-unstyled-link">
               {%- if card_collection.title != blank -%}
                 {{- card_collection.title | escape -}}