How do I align cart drawer table? (Atelier Theme)

Store Design
1

How do I align cart drawer table so that the image and table align?

Screenshot 2025-09-19 at 20.50.45
Screenshot 2025-09-19 at 20.50.45812×936 21.4 KB

3

Step 1. Go to the CSS file

In your Shopify admin, go to
Online Store → Themes → ⋮ → Edit code

In the left panel, open:
Assets → base.css (or theme.css, global.css, whichever your theme uses)

Step 2. Paste the CSS

Scroll all the way to the bottom of that CSS file

Paste the code exactly as I gave it, for example:

/* ===== CART DRAWER TABLE ALIGN FIX ===== */

.cart-drawer .cart-item {
  display: grid;
  grid-template-columns: 80px 1fr auto auto; /* image | info | qty | price */
  gap: 1rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid #eee;
}

.cart-drawer .cart-item__image {
  width: 80px;
  height: 80px;
  border-radius: 6px;
  overflow: hidden;
}

.cart-drawer .cart-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cart-drawer .cart-item__details {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cart-drawer .cart-item__quantity {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cart-drawer .cart-item__price {
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
}