Make header icons smaller and more spaced out

[Luxurymrkt]

Hi> > I want my header icons on Mobile only> > smaller and spaced out like this picture> >

> > my site is https://Vazluxe.com> >

[Sweans]

Hi @Luxurymrkt ,

Online Store under Sales Channels. Click the three dots next to the theme you want to edit and select Edit Code.

2. Locate the appropriate CSS file (main.css, theme.css, base.css, or style.css) based on your theme.

Add the following CSS code:

@media screen and (max-width: 756px) {
       .header .icon-button__icon .icon {
           width: 22px;
           height: 22px;
       }

       .header__icon-touch.header__icon-touch--search {
           margin-right: 15px;
       }
   }

Refer the below screenshot

You can adjust the width, height, and margin-right values as needed.

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,
Sweans

[GTLOfficial]

Hello @Luxurymrkt
Go to online store ----> themes ----> actions ----> edit code---->theme.css
add this code at the end of the file.

@media (max-width: 749px) {
.header .icon-button__icon .icon {
width: 22px;
height: 26px;
}
}

result

If this was helpful, hit the like button and accept the solution.
Thanks