Changing Social Media Icon Size for Debutify theme

Store Design
, ,
1

Changing Social Media Icon Size for Debutify theme

I would like to change the size of xocial media icons (Facebook, twitter etc. in footer as SEO optimization for mobile require size around 48px for betetr visibility. Please help me out for the the code and where it will be pasted. I have theme.scss and theme.liquid files only.

2

Hello,

I’m ready to assist you. Can you share the URL of your Store, so I can see your icons?

3

www.adeelity.com

Please note that social media icon size can be increased by changing the font size of all footer text. But i dont need to change the footer text only the social media icons size.

4

Hello, Owausmunir,

thanks for the URL. I inspected your code and I see that you’re using Debutify theme. To make your social media icons bigger in footer, first go to Online Store and choose Customize Debutify theme.

After that, select Home page in the top

JustasG_0-1694945762664.png

and choose Footer section from Sections on the left menu.

left-footer.jpg
left-footer.jpg446×856 35.2 KB

In the bottom of Footer section settings menu you should see Custom CSS field. Copy and paste this code there:

svg {
  width: 48px;
  height: 48px;
}

Save changes and your footer social media icons should be bigger! You can adjust icons size to your preference by changing width and height values in custom CSS area.

Also, if you want to make this change for mobile devices only, you can use this code with media rule instead:

@media screen and (max-width: 800px) {
  svg {
    width: 48px;
    height: 48px;
  }
}
1 Like
5

Dear JustasG,

Thank you for your support, it worked .