Cart Word in the icon on cart drawer (Focal Theme)

[MS-Ecom2024]

Can someone fix that quick? 



Its just on mobile view / desktop view is fine.

Thanks! 

[Made4uo-Ribe · Accepted solution]

Hi @MS-Ecom2024 

It seems like you add some code. To move the bag icon to the right. 

This is overide code, to take this one you need to find the code in the theme.liquid. But if cant find it you can try this code below. 

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:

@media screen and (max-width: 767px){
p.drawer__title.heading.h6 {
    gap: 15px;
}
}

If its not working add some !important;

@media screen and (max-width: 767px){
p.drawer__title.heading.h6 {
    gap: 15px !important;
}
}

And save. 

The disadvantage of the code I give is you have more space on the left on your icon bag. 

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

[Made4uo-Ribe · Accepted solution]

Hi @MS-Ecom2024 

It seems like you add some code. To move the bag icon to the right. 

This is overide code, to take this one you need to find the code in the theme.liquid. But if cant find it you can try this code below. 

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:

@media screen and (max-width: 767px){
p.drawer__title.heading.h6 {
    gap: 15px;
}
}

If its not working add some !important;

@media screen and (max-width: 767px){
p.drawer__title.heading.h6 {
    gap: 15px !important;
}
}

And save. 

The disadvantage of the code I give is you have more space on the left on your icon bag. 

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

[MS-Ecom2024]

Hey the code was made for the desktop version because of an word we added. Unfortunately this problem is just for the cart drawer, not the normal front page. Will this code still solve the problem if the adjustment you've send should just be on cart drawer not in general? 

[Moeed · Accepted solution]

Hey @MS-Ecom2024 

Update your code with this and it should be good then!

.header svg.icon.icon--header-cart {
    left: 15px !important;
    position: relative;
}

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Made4uo-Ribe]

Yes, this is only in the drawer cart the code said p.drawer. its the selector ive used in your cart drawer. Seems like you didnt atleast try my code. Thanks anyway. 

[MS-Ecom2024]

Hey, I had bad experiences with a few codes, thats why I ask to be save. Anyway it's also the right code. : )