Hi,
website in question:
https://businessboutiqueonline.com/
password: rawbra
desktop version: I added the social media icons on dawn theme header, but:
in desktop the distances are not the same between cart and social media, how can I fix this?
image: https://ibb.co/9tpMPT2
mobile version: on mobile, the icons are not displaying in the same line (tik tok is under), and also distances are not right.
image: https://ibb.co/wNzcw07
How can I fix this?
Thanks for your comments 
Hello @urbantis ,
Add this css at the bottom
Online Store->Theme->Edit code
assets->base.css
#cart-icon-bubble {
margin-right: 2px;
}
@media(min-width: 280px) and (max-width: 767px){
.header__icon.header__icon–search.header__icon–summary.link.focus-inset.modal__toggle {
width: 23px;
margin-left: 13px;
}
#cart-icon-bubble {
margin-right: 0px;
}
.header-list-socail.list-unstyled.list-social {
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
.header-list-socail .link.list-social__link {
padding: 8px;
}
.header__heading-logo {
width: 130px;
}
}
You need to remove this to fix on Desktop, it’s in base.css file
To move tiktok in same line, you can add this css to any css file of the theme
ul.header-list-socail.list-unstyled.list-social {
display: contents;
}
But I’ll suggest to do the social icons in separate line or in some other elegant way as 4 icons along with logo in a single line may look crowded.
Thank you, this worked for the distance in desktop, as for mobile, how can I hide them for header instead (but still keeping the footer)?
Add this css at the bottom
Online Store->Theme->Edit code
assets->base.css
@media(min-width: 280px) and (max-width: 767px){
.header-list-socail.list-unstyled.list-social {
display: none !important;
}
}
For same reason it does not work for hiding it on mobile, am I doing something wrong?
Add this css to remove header social icons only for mobile,
@media only screen and (max-width: 767px){
.header__icons > .list-social {
display: none;
}
}
