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

[haqq016]

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/ 

[devcoders]

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%;
}

[niraj_patel]

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>

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

[Spac-es · 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:

[haqq016]

Thank you! I appreciate your help and wonderful code 😉