Shopify themes, liquid, logos, and UX
Can someone fix that quick?
Its just on mobile view / desktop view is fine.
Thanks!
Solved! Go to the solution
This is an 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!
This is an 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
This is an 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!
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?
This is an 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
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.
Hey, I had bad experiences with a few codes, thats why I ask to be save. Anyway it's also the right code. : )
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024