Still no help with resizing social media icons.

[chrisc1987]

Still no help with resizing social media icons after the Studio Theme 15.3

  

update.

[TheScriptFlow]

In order to paste the code from Custom Css to theme file then the best place is base.css or theme.css file.

Here are the steps you can follow.

Go to Shopify Admin > Online Store > Edit Code > base.css or theme.css file.

Go to end of this file and paste the custom css code.

[chrisc1987]

I don't know how to do that, unfortunately. 

[devcoders]

Hello @chrisc1987 
Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

[chrisc1987]

Hi @devcoders,

URL is https://lryv7tj9xxzi1sgg-9984671841.shopifypreview.com

I think.

[tim]

Please, follow the instructions from https://community.shopify.com/c/shopify-design/how-can-i-share-an-unpublished-theme-preview-link/td-... and finally  share a preview link to the actual theme you're having problems with.

The button may look different for you:

[TheScriptFlow]

Hey @chrisc1987,

You are right that in the new updated version you are not able to resize the icons with the same css that in used in the old theme. This is because in the updated theme there is new class added name by .svg-wrapper that control the size of the Social Icons.

So, now instead of targeting the icon svg class you need to target the .svg-wrapper.
Currently I see that there is 20px width and height is set to the Social Icons. 

Here it is:

 

So, when we change it then the size of the icons increase at one time. So in order to change it's size you have to paste the following code at the end of existing one.

.svg-wrapper {
    width: 30px !important;
    height: 30px !important;
}

You can increase the number from 30px to any number based on your requirements.

 If you want to have a different icon sizes on Mobile then you can paste the following whole code instead of the previous one.

.svg-wrapper {
    width: 30px !important;
    height: 30px !important;
}
@media only screen and (max-width: 767px){
.svg-wrapper {
    width: 20px !important;
    height: 20px !important;
}
}

The above code also cover the mobile devices with different size.

I hope this help a lot. If this was really helpful then mark my reply as Solution and Like it.

Thanks

[chrisc1987]

Hi @TheScriptFlow,

Thank you for your reply. Can I use the custom CSS box in the footer section to input these codes, or will it need to be in the code editor?

[TheScriptFlow]

You can absolutely use the custom css box to put the coding that I provide you. 

[chrisc1987 · Accepted solution]

Okay, so the first code does work, but as you stated, it only targets the WRAPPER SIZE and not the actual icon itself inside the wrapper. But I may have figured it out slightly with some other help, finally. This it what I have now and it seems good, no yellow underlines.

 

[TheScriptFlow]

You did it perfectly. Instead of repeating the same class you add the width and height in the SVG wrapper class. 

Now I hope your issue is fixed. If you need other assistance I will be more than happy.

- If my reply was helpful, mark it as a solution and hit the like button! And Wait Don't forget to Buy me a Coffee ☕