A user seeks to extend the separation line in their cart drawer to span the full width on both mobile and desktop versions. Currently, the line doesnāt reach the edges due to padding around the drawer.
Proposed Solutions:
Remove drawer padding: One suggestion notes the gap exists because of built-in padding, though removing it may affect other content alignment.
CSS customization: Another user provides specific CSS code to adjust padding values for the cart drawer elements (.drawer__inner, .drawer__header, .cart-items, .drawer__footer), which should extend the separation line to full width.
Outcome:
The original poster confirmed the CSS solution worked and thanked the contributors. The issue appears resolved through the provided code snippet added to the themeās CSS file.
Thanks in advance!
I am looking to make my separation line fit the whole cart drawer width (when there are items in the drawer) that works for both mobile and pc versions. Example shown below.
How my site looks:
How I would like my site to look:
password: dc
@MMast - pit is showing gap as drawer have padding around it, and removing padding will take content to side a well
HI @MMast
Check this one.
From your Shopify admin dashboard, click on āOnline Storeā and then āThemesā.
Find the theme that you want to edit and click on āActionsā and then āEdit codeā.
In the āAssetsā folder, click on ābase.css, style.css or theme.cssā file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.drawer__inner {
padding: 0;
}
.drawer__header, cart-drawer-items, .drawer__footer {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
And Save.
result:
Thank you!
