How to shrink header icons while keeping text large on mobile?

Solved

How to shrink header icons while keeping text large on mobile?

Stagtis
Explorer
65 0 15

Hi, I am looking to keep the text on my pages large but not anything in the header. I used code to shrink the words in my header but the icons like the search button, currency converter etc are still unchanged. i would also like this solution to work on mobile including the burger drawer. thanks so much

 

website is www.stagtis.com

 

 

Screenshot 2024-02-07 090636.png

Accepted Solution (1)
webwondersco
Shopify Partner
1200 171 174

This is an accepted solution.

Please add the below CSS for the cart icon.

 

body .header__icon--cart .icon{
height:2.7rem;
width:2.7rem;
}
Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram

View solution in original post

Replies 4 (4)

webwondersco
Shopify Partner
1200 171 174

@Stagtis Please add the below line of CSS code at the end of your base.css file.

 

body .header-localization .disclosure .localization-form__select{
font-size:1.1rem;
}
body .header__icon .icon{
height:1.5rem;
width:1.5rem;
}
Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
Stagtis
Explorer
65 0 15

Hi, thanks so much for replying fast, this works well, But the cart icon remains really small even when I mess with the REM to taste. Also, i should've mentioned this, but part of the reason I wanted to this was so that on mobile the logo would be centred again but making the icons smaller doesn't

 

 

help like IScreenshot 2024-02-07 103237.png thought it would. Thank you

webwondersco
Shopify Partner
1200 171 174

This is an accepted solution.

Please add the below CSS for the cart icon.

 

body .header__icon--cart .icon{
height:2.7rem;
width:2.7rem;
}
Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
Stagtis
Explorer
65 0 15

thanks