Make empty cart drawer full width on mobile

[vanessabate]

hi, can someone please help me make my empty cart drawer full width on my mobile site?

www.tydejewellery.com

PW: chester

[PageFly-Henry]

Hi @vanessabate

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

@media (max-width: 767px){

.drawer__inner-empty {

width: 350px !important;

}}

Hope that my solution works for you.

Best regards,

Henry | PageFly

[vanessabate]

It didn’t work unfortunately, do you have any other ideas?

[yashgarg]

Hi @vanessabate ,

Please follow the following steps

1. Go to your online store and select Themes from left panel

2. Press 3 dots menu in center (on the left of Customize button) and then Edit Code

3. Open the file base.css (you can search for it)

4. Add the following CSS code at the end of that file

5. Save the changes, and refresh your store to see them in effect

.cart-drawer {
width: 100%;
}

After adding these styles the mobile will look like this

[PageFly-Henry]

Please try again with this code:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: paste bellow code in tag → save.

@media (max-width: 767px){ cart-drawer.drawer.is-empty.animate.active .drawer__inner-empty { width: 350px !important; } }

[Made4uo-Ribe]

Hi @vanessabate

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 “theme. Liquid” file. Find the tag and paste the code below before the tag.

And Save.

Result:

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!