Unwanted cart-drawer padding custom snippet

Unwanted cart-drawer padding custom snippet

lf-ecom-shops
Explorer
58 2 7

Hey, wassup community

I coded a FOMO creating countdown timer snippet, just added {% render 'cart-timer' %} and it worked well. But I've got some unwanted side padding there, and I have no idea why, it doesn't has to anything with the timer itself, the snippet has 0 side padding. Would appreciate help

Screenshot_8-5-2024_114624_admin.shopify.com.jpeg

Replies 11 (11)

AnneLuo
Shopify Partner
1257 223 258

Hello, @lf-ecom-shops 

May I ask which part of the padding you are referring to? Can you point it out and provide the store URL so that I can assist you.

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

lf-ecom-shops
Explorer
58 2 7

I mean the side padding, my store url is: 3f7f0b-90.myshopify.com   and the password: 123

lf-ecom-shops
Explorer
58 2 7

I mean from the cart timer I made, as you see in the picture

AnneLuo
Shopify Partner
1257 223 258

Since the width is 100%, changing it to this property will remove padding

 

AnneLuo_0-1715163957732.png

AnneLuo_1-1715164028995.png

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

lf-ecom-shops
Explorer
58 2 7

Oh sorry, that's not what I meant, I meant there shouldn't be this white space on the sides, these should be im the blue, so that it's full width, I made it full width and 0 side-padding, but the white side space is still there

AnneLuo
Shopify Partner
1257 223 258

Do you want this effect?

 

AnneLuo_0-1715164648195.png

 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

lf-ecom-shops
Explorer
58 2 7

Yeah

websensepro
Shopify Partner
1854 215 260

Hello @lf-ecom-shops,

Paste this code in base.css in the bottom if the file.

 

 

 

.drawer__cart-items-wrapper{
      padding: 0rem 1.5rem !important;
}

.drawer__header{
     padding: 0rem 1.5rem !important;
}

.drawer__inner.gradient.color-scheme-1{
    padding: 0rem 1.5rem !important;
    overflow: hidden;
}

.drawer__footer {
padding: 1.5rem 3rem !important;
}

.cart-items thead{
   padding: 0rem 1.5rem !important;
}

 

 

 

websensepro_0-1715165407869.png

 


Thanks!

Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP
lf-ecom-shops
Explorer
58 2 7

Thanks but I tried it aswell haha, I am a coder and full-stack-developer, but that didn't work, tried it now again, still didn't work

websensepro
Shopify Partner
1854 215 260

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid

 

drawer__cart-items-wrapper{
      padding: 0rem 1.5rem !important;
}

.drawer__header{
     padding: 0rem 1.5rem !important;
}

.drawer__inner.gradient.color-scheme-1{
    padding: 0rem 1.5rem !important;
    overflow: hidden;
}

.drawer__footer {
padding: 1.5rem 3rem !important;
}

.cart-items thead{
   padding: 0rem 1.5rem !important;
}

 



Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP
AnneLuo
Shopify Partner
1257 223 258

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the </head> tag

 

<style>
.drawer__inner{
   padding: 0 !important;
}
.drawer__header,
.drawer__footer{
   padding: 1.5rem !important;
}
.drawer__cart-items-wrapper {
   padding: 0 1.5rem;
}
</style>

 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee