Adjust the social media icon size - Studio theme

[GeeKyuu24]

Hi Team.

I have social media icons on my footer. I tried to adjust the size via CSS using the code below but it’s not working. Seeking your kind guide here and I really appreciate it.

Store: Glowcare.se
PS: Glowcare1991

a.list-social__item.icon {
width: 4rem;
height: 4rem;

I also tried

list-social__item.icon {
width: 4rem;
height: 4rem;

[pronasit]

To adjust the size of social media icons in the Studio Theme, follow these general steps:

Access Theme Customization: Log in to your website’s admin dashboard and navigate to the theme customization settings. This location may vary depending on the platform or content management system (CMS) you are using (e.g., WordPress, Shopify, Wix).

Locate Social Media Icon Settings: In the theme customization settings, look for options related to social media icons. This can typically be found under the “Header” or “Appearance” sections.

Adjust Icon Size: Within the social media icon settings, you should find an option to adjust the icon size. This might be a slider, dropdown menu, or input field where you can specify the desired size.

Save Changes: After making the desired adjustments to the icon size, be sure to save your changes. There is usually a “Save” or “Publish” button in the customization panel.

Preview and Test: Before finalizing your changes, preview your website to ensure that the social media icons now appear at the desired size. You may need to refresh the page to see the updated icon size.

Fine-Tune as Needed: If the size isn’t perfect, you can go back to the customization settings and make further adjustments until you achieve the desired icon size.

Publish Changes: Once you are satisfied with the icon size, publish the changes to make them live on your website.

[Moeed]

Hey @GeeKyuu24

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[websensepro]

Hi, @GeeKyuu24 .

Follow These Steps.

Goto Online store > Assets > Edit code > find Base.css File and paste the code mentioned below.

.list-social__item .icon {
  height: 4rem !important;
  width: 4rem !important;
}

Result:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

[GeeKyuu24]

Hi, it worked. However the footer was affected. These are one line before and they got messed up. How will I be able to fix it? Also to move it on the right side

[websensepro]

Hi, @GeeKyuu24 .

Follow These Steps.

Goto Online store > Assets > Edit code > find Base.css File and paste the code mentioned below.

@media (max-width:1440px) {
.footer__blocks-wrapper .footer-block.grid__item {
    max-width: 45% !important;
}

}

.footer__list-social.list-social:only-child {
    justify-content: end !important;
    width: 100% !important;
}

Result:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

[GeeKyuu24]

It did not work

[websensepro]

Please remove 1440 and add this .

@media (min-width:320px) and (max-width:767px) {
.footer__blocks-wrapper .footer-block.grid__item {
    max-width: 45% !important;
}

}

.footer__list-social.list-social:only-child {
    justify-content: end !important;
    width: 100% !important;
}

[GeeKyuu24]

What should I put exactly?

[websensepro]

please add this code. i hop this is helpfull for you.

[GeeKyuu24]

I really tried everything but none from the CSS works. The code above to theme.liquid works but the text was affected as they are no longer in one line.

[websensepro]

send me file screenshot.

[GeeKyuu24]

Here it is:

[websensepro]

Please check your dm Message.