Modifying the spacing of header icons for cart, account, and favorites

Solved
Highlighted
Tourist
4 0 2

I'm really having trouble finding the part of the code to change the spacing between my header icons and I've searched without success. I found some bit of code to make them equidistant but they are spaced too far apart on desktop. Mobile site looks fine.

https://gold-hill-river.myshopify.com/

password: peutro

0 Likes
Highlighted
Shopify Partner
2329 508 659

Hey @Deewil,

Please add the following code at the bottom of your assets/theme.scss.liquid file.

@media only screen and (min-width: 750px){
.site-header__icons-wrapper { display: block !important; }
}

 

Let me know if this works.

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
0 Likes
Highlighted
Tourist
4 0 2

Hello @dmwwebartisan thanks for the reply. This code works but it just bunches the icons up together again. I'm trying to have a bit of whitespace between the icons and the original code I modified left about an inch in between each one. I'm hoping for about half that. 

I used the code below on line 4900 of theme.scss

@include justify-content(space-between);
0 Likes
Highlighted
Shopify Partner
2329 508 659

This is an accepted solution.

Hey @Deewil,

Remove old code and try this new code:

@media only screen and (min-width: 750px){
.site-header__icons-wrapper {padding: 0 55px; }
}

 

Hope this will work.

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
0 Likes
Highlighted
Tourist
4 0 2

thank you so much @dmwwebartisan you've saved me many days of stress. This is perfect.

1 Like