Line-item content spacing on larger screens (#553)

Shopify · Sep 9, 2021 · 5179ab1 · 5179ab1
1 parent 6888fc9
commit 5179ab1
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/assets/component-cart-items.css b/assets/component-cart-items.css
@@ -25,7 +25,13 @@
 
 .cart-item__image {
   height: auto;
-  max-width: 100%;
+  max-width: 10rem;
+}
+
+@media screen and (min-width: 750px) {
+  .cart-item__image {
+    max-width: 100%;
+  }
 }
 
 .cart-item__details {

diff --git a/sections/main-cart-items.liquid b/sections/main-cart-items.liquid
@@ -48,11 +48,11 @@
                     {% if item.image %}
                       <a href="{{ item.url }}">
                         <img class="cart-item__image"
-                          src="{{ item.image | img_url: '150x' }}"
+                          src="{{ item.image | img_url: '300x' }}"
                           alt="{{ item.image.alt | escape }}"
                           loading="lazy"
-                          width="100"
-                          height="{{ 100 | divided_by: item.image.aspect_ratio | ceil }}"
+                          width="150"
+                          height="{{ 150 | divided_by: item.image.aspect_ratio | ceil }}"
                         >
                       </a>
                     {% endif %}