More space around icon for whatsapp on top of header

[shellbell]

I want to have more space on the left/right of the icons.

https://www.silverbandcompany.com/

Can someone help? Everything I have tried according to some other posts isn't working. Also to make it mobile friendly. Thanks.

[Artzen_tech]

Hello @shellbell 

Its Artzen Technologies! We will be happy to help you today.

1. Go to online store > theme > Edit code > Assets > theme.scss (file) and  Paste the below code at bottom of the file -> Save

#shopify-section-header i{
   padding: 0px 10px;
}

Let me know if need further assistance

Regards,

Artzen Technologies

[shellbell]

Yes this worked! I just modify a bit. Do you know how to fix the mobile view though? As it looks like this at the moment?

[Artzen_tech]

Hello @shellbell 

Its Artzen Technologies! We will be happy to help you today.

1. Go to online store > theme > Edit code > Assets > theme.scss (file) and  Paste the below code at bottom of the file -> Save

@media screen and (max-width : 767px){
  #shopify-section-header .header-icons{
     font-size: 11px;
  }
  #shopify-section-header i {
     padding: 0 4px 0 4px;
  }
}

2.  See the below screenshot after save the above code.

Let me know if need further assistance

Regards,

Artzen Technologies

[shubhamSharma]

hi @shellbell 

step 01:
1. Go to your Store > Theme > click to edit code.
2. find this file "theme.scss.css " and open.

step 02:
1. Paste the code at the of the file.

.header-icons a.store-header .“icon-whatsapp” {
    margin: 10px;
}
.header-icons i.“icon-line” {
    margin: 10px;
}
@media only screen and (max-width:767px){
	.header-icons a.store-header .“icon-whatsapp” {
	    margin: 10px;
	}
	i.“icon-line” {
	    margin: 5px;
	}

}

hope this idea helps you

[GemPages]

Hello @shellbell ,

It's the GemPages Support Team and we are glad to assist you today!

I would like to give you the recommendation to support you so kindly follow the steps below:

1. Go to Online Store > Theme > Edit code of your current theme

2. Open your theme.liquid theme file

3. Paste the below code before </head>

<style>
.header-icons i {
    margin: 0 5px 0 15px;
}
</style>

Let us know how it works for you.

Best regards,
GemPages Support Team

[PageFly-Victor]

Hi @shellbell 

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->Theme.scss.css

#shopify-section-header i{
   padding: 0px 10px !important;
}

Hope you find my answer helpful!

Best regards,

Victor | PageFly

[PageFly-Victor]

Hi @shellbell 

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->Theme.scss.css

@media(min-width: 1024px){
#shopify-section-header i{
   padding: 0px 10px !important;
}
}

Hope you find my answer helpful!

Best regards,

Victor | PageFly