Drawer Cart Margin Problem Sleek Theme

Shopify Discussion

Topic summary

A user is experiencing an unwanted margin appearing at the bottom of their drawer cart in the Sleek theme. The spacing issue occurs below the product list, specifically visible as a grey line before the “total estimé” (estimated total) section on mobile.

Proposed Solution:

  • Use browser inspector (right-click → Inspect) to identify the CSS element causing the extra space
  • Look for margin-bottom or padding-bottom properties on:
    • Product container
    • Cart item wrapper
    • Divs before the total block
  • Override the spacing by adding custom CSS to theme.css or base.css:
.drawer__cart .cart-items-wrapper {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

Status: The issue remains unresolved. A community member offered to provide more specific guidance if given access to preview the site or additional theme details.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I have an issue on my drawer cart when I add a product in my cart, a margin side is on the bottom and I can’t remove it. (you can see it on the second grey ligne before “total estimé” and it’s the same for everything after)

Does anyone know how to do this please?

Here is my website: https://1sk0ih-as.myshopify.com/products/4-in-1-skincare-wand-kit?pb=0

On mobile:

Ulysse12342_0-1748257959657.png
Ulysse12342_0-1748257959657.png210×400 18.8 KB

2

Hi @Ulysse12342

It sounds like there’s likely an unwanted CSS margin or padding being applied inside your drawer cart — especially below the product list and before the “Total estimé” section.

To fix it, here’s what you can try:

Step 1: Use the Browser Inspector1. Right-click on the area with the extra space in your drawer cart.

  1. Click “Inspect” (in Chrome or similar browsers).

  2. Look for any margin-bottom or padding-bottom applied to:

    • The product container

    • The cart item wrapper

    • Or any adjacent div before the total block

Once you find the exact class or element with the unwanted spacing, you can override it.

Step 2: Add Custom CSS

In your theme.css or base.css file (depending on your theme), add something like:

.drawer__cart .cart-items-wrapper {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

If you can share the exact theme or a link to preview the issue, I’d be happy to pinpoint the exact fix for you.

Let me know if you’d like me to take a quick look or help implement the code directly!