What's your biggest current challenge? Have your say in Community Polls along the right column.

How to make social media icons bigger in Trade theme?

Solved

How to make social media icons bigger in Trade theme?

Hughmanity
Shopify Partner
3 0 2

I'm trying to make the social media icons at the bottom of the page larger in the Trade theme. I've done it before in Dawn but that code isn't working, nor are any of the other code suggestions I've tried from this board related to other themes. Can anyone help me related specifically to the Trade theme? Thank you!

 

PS It's a development store so I don't have a link, sorry.

 

 

Accepted Solution (1)

Laza_Binaery
Shopify Partner
205 44 67

This is an accepted solution.

Hi @Hughmanity 

 

To make social icons bigger, try to edit your theme, and find assets/component-list-social.css file, replace code

.list-social__item .icon {
  height: 2.2rem;
  width: 2.2rem;
}

 

with 

 

.list-social__item .svg-wrapper {
    width: 40px;
    height: 40px;
}

.list-social__item .icon {
  height: 3.2rem;
  width: 3.2rem;
}

 

and adjust both pairs. Class svg-wrapper controls the space and limits icon class size.  Save file and test.

Kind regards
Laza
www.binaery.com

View solution in original post

Replies 2 (2)

Laza_Binaery
Shopify Partner
205 44 67

This is an accepted solution.

Hi @Hughmanity 

 

To make social icons bigger, try to edit your theme, and find assets/component-list-social.css file, replace code

.list-social__item .icon {
  height: 2.2rem;
  width: 2.2rem;
}

 

with 

 

.list-social__item .svg-wrapper {
    width: 40px;
    height: 40px;
}

.list-social__item .icon {
  height: 3.2rem;
  width: 3.2rem;
}

 

and adjust both pairs. Class svg-wrapper controls the space and limits icon class size.  Save file and test.

Kind regards
Laza
www.binaery.com
Hughmanity
Shopify Partner
3 0 2

That worked, thank you!