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

Store Design
, , ,

Topic summary

A user is experiencing a sizing inconsistency between Instagram and TikTok social media icons, specifically on the mobile version of their store. The Instagram icon appears larger than desired.

Solutions provided:

  • Option 1: Add CSS code to assets/plain-jane.css targeting .social-logo.invert img with width: 18px and height: 16%

  • Option 2: Insert CSS in theme.liquid before </body> tag using a media query for screens min-width 767px, targeting .social-link.instagram

  • Option 3: Add CSS to plain-jane.css targeting .social-link with width and height set to 20px using !important, plus flexbox display and margin adjustments

All solutions involve adding custom CSS code to control icon dimensions. The user confirmed one solution worked successfully. Respondents noted dimensions can be adjusted according to preference.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
4

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
result.PNG320×450 5.03 KB

1 Like