Solved

Adjusting size of social icons, Flow theme

PCBCW
Excursionist
20 0 2

Hello, I am trying to adjust the size of the social media icons on my site, yearsbeer.com. I would like to make them bigger. Please see attached for photo of current size. Thank you!Untitled.jpg

Accepted Solution (1)

ThePrimeWeb
Shopify Partner
2138 614 491

This is an accepted solution.

Hey @PCBCW,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

 

Change 30px to any value you want. Make sure to match both width and height to the same number.

<style>
body footer ul#sm-icons li svg {
    height: 30px !important;
    width: 30px !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above. 

ThePrimeWeb_0-1712585208790.jpeg

 

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 5 (5)

PageFly-Noah
Shopify Partner
1288 229 262

This is Noah from PageFly - Shopify Page Builder App

 

Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </head>

 

<style>
#sm-icons li a svg{
    width: 40px !important; //you can change 40 to params you want
    height: 40px !important;
}

</style>

 

Hope my solution will help you resolve the issue.

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

PCBCW
Excursionist
20 0 2

Hey Noah,

 

Tried this, it did not work.

 

 

PageFly-Noah
Shopify Partner
1288 229 262

Hi @PCBCW  please add code here again.

<style>
  .footer-main #sm-icons li svg{
     width: 40px !important; //you can change param you want
     height: 40px !important;
}
</style>

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

ThePrimeWeb
Shopify Partner
2138 614 491

This is an accepted solution.

Hey @PCBCW,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

 

Change 30px to any value you want. Make sure to match both width and height to the same number.

<style>
body footer ul#sm-icons li svg {
    height: 30px !important;
    width: 30px !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above. 

ThePrimeWeb_0-1712585208790.jpeg

 

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
PCBCW
Excursionist
20 0 2

That worked, thank you so much!