Cart and logo clashing on mobile

Solved
Highlighted
Tourist
4 0 1

Hi - 

I'm using a custom theme. I've noticed that my cart is overlapping with my logo at the top of my page when viewed on mobile.

https://homeplant.co.uk/

Would anyone be able to help me fix this please?

EDIT: Should have mentioned - please explain it to me like I am five years old. I have very limited coding knowledge. 

Many thanks,

Mike 

0 Likes
Highlighted
Shopify Partner
2329 510 661

Hey @Mike_HomePlant 

Try this CSS class.

Add code assets/theme.scss.liquid Or assets/timber.scss.liquid bottom of the file

@media only screen and (max-width: 749px){
.site-header__icons .btn--link, .site-header__icons .site-header__cart {font-size: 0.80em;}
.cart-items { margin-right: 0px; padding: 4px 6px}
.site-header__icon {padding: 4px 6px;}
}

Hope this will work for you.


Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
1 Like
Highlighted
Excursionist
333 50 77

This is an accepted solution.

Hello @dmwwebartisan Please place this css at the end of theme.scss file

@media only screen and (max-width: 749px) {
  .site-header__icon {
      padding: 0px;
  }
}
@media only screen and (max-width:  500px) {
  .site-header__icon svg {
    width: 26px;
    height: 26px
  }
}

 

If this solution works, please click on accepted as solution and click on like button!!!

If this solution works, then please accept it as solution and like.
For theme customization, please contact parambabla.soft@gmail.com
1 Like
Highlighted
Tourist
4 0 1

I had to change the size slightly but this one worked. Thank you so so much! 

1 Like
Highlighted
Excursionist
333 50 77

Thank you for accepting as solution and giving like. If you want to customize your store desgin or want to add any functionality, please feel free to contact me

my email: parambabla.soft@gmail.com

If this solution works, then please accept it as solution and like.
For theme customization, please contact parambabla.soft@gmail.com
0 Likes