Adding a padding to an icon on mobile view

Technical Q&A
1

Hello.

I added a phone icon on my header so my customers can easily go to the “Contact Us” page. No problem on side view or full scale view.

However, if I reduce the width of the page or go to the mobile view, the icon ends up sticking on the reduced navigation menu icon.

Sans titre icon.png
Sans titre icon.png639×281 20.4 KB

To add the icon I used the code in header.liquid :

I tried to place “style=padding-right: …px” whenever possible and it changes nothing. I am clueless know. Did someone solved this problem in the past? I am using the theme Impulse.

2

hello @Toul24

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen and (max-width: 729px){
.phone.icon{
	margin-right: 12px;
}
}
1 Like
3

Hello Natztech,

It worked! So the solutions lies in the assets. It’s amazing how coding is easy for some people.

Thank you very much for your help!

Cordially,

Toul24