Solved

How can I resize social media icon to be the same size as the other?

haqq016
Visitor
3 0 2

Hello world! I hope everyone is doing well.

 

I was wondering if anyone would happen to know how to resize the "INSTAGRAM" icon for it to be the same size as the "TikTok" icon. I would like for them to both be the same size and small. (ERROR IS ONLY IN MOBILE STORE! THE DESKTOP VERSION LOOKS FINE)

 

I have attached a picture to show you exactly what I am talking about, and the link to the store; 

 

https://postimg.cc/MnLVTLwJ

https://d13b22-52.myshopify.com/ 

 

Accepted Solution (1)

Spac-es
Shopify Partner
374 109 130

This is an accepted solution.

Add this code in your plain-jane.css file:

.social-link {
  width: 20px !important;
  height: 20px !important;
  display: flex !important;
  margin: 0 8px !important;
  justify-content: center;
}

You can adjust the width and height according to your preferences!

Result:

 

result.PNG

 

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!

View solution in original post

Replies 5 (5)

devcoders
Shopify Partner
190 31 48

Hi @haqq016 

Go to Online Store, then Theme, and click on Edit code.
Locate the file assets/plain-jane.css, and paste the code provided below at the end of the file.

 

img.social-logo.invert {
width: 18px;
height: 16%;
}

 

devcoders_0-1716565483507.png

 

Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com.
If my assistance was helpful, please consider liking and accepting the solution. Thank you!

kaiyaa
Explorer
254 19 24

Hello @haqq016 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>
a.social-link.tik-tok.w-inline-block {
    width: 10%;
    height: 16%;
}
a.social-link.tik-tok.w-inline-block img
{
    width: 100%;
    height: 100%;
}
</style>


 If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Was I helpful? Buy me a coffee
For fast response Message me
Need Help Message me

techlyser_web
Shopify Partner
1636 301 322

Hello @haqq016 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (min-width: 767px) {
    .social-link.instagram {
      width: 4% !important;
       height: 16% !important;
    }
}
</style>

techlyser_web_0-1716566226231.png

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

Spac-es
Shopify Partner
374 109 130

This is an accepted solution.

Add this code in your plain-jane.css file:

.social-link {
  width: 20px !important;
  height: 20px !important;
  display: flex !important;
  margin: 0 8px !important;
  justify-content: center;
}

You can adjust the width and height according to your preferences!

Result:

 

result.PNG

 

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
haqq016
Visitor
3 0 2

Thank you! I appreciate your help and wonderful code 😉