Change size social media icons on MOBILE ONLY

Store Design

Topic summary

A user is attempting to increase the size of social media icons in their Shopify store’s footer, but only on mobile devices. Their initial CSS code targeting .footer-block--newsletter .list-social__item with media query max-width: 749px is not working.

Proposed Solutions:

Multiple community members offered CSS fixes:

  • suyash1 suggested targeting .list-social__item .svg-wrapper and .list-social__item .icon with specific rem values (4rem and 3.2rem)
  • DaisyVo recommended adding code to Theme Settings > Custom CSS, targeting the footer newsletter social list with 60px dimensions at max-width: 768px
  • EstherBui provided a solution using 5.5rem for .list-social__item .icon and setting .svg-wrapper to auto width/height

All solutions include visual examples showing enlarged icons. The user reported that pasting code into base.css didn’t work, suggesting placement in the Custom CSS section may be necessary. The issue remains unresolved as the user hasn’t confirmed which solution worked.

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

edensbakehouse.nl

yuidri

I am trying to make the social media icons look bigger on mobile.

I tried code:

@media only screen and (max-width: 749px){
.footer-block–newsletter .list-social__item .svg-wrapper .icon {
height: 34rem !important;
width: 3rem !important;
}
}

But this is not working for me :disappointed_face:

Please help!

2

@EdensBakehouse try this

@media only screen and (max-width: 749px){
.list-social__item .svg-wrapper{width: 4rem;  height: 4rem;}
.list-social__item .icon {height: 3.2rem; width: 3.2rem;}
}
3

hey @EdensBakehouse plz share your store URL

4

I pasted this in the base.css, but nothing happens.

5

@EdensBakehouse - not abler to see it on browser, can you please add it again at the very end?

6

Hi @EdensBakehouse

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
@media screen and (max-width: 768px){
.footer-block--newsletter ul.list-unstyled.list-social.footer__list-social li .svg-wrapper, .footer-block--newsletter ul.list-unstyled.list-social.footer__list-social li .svg-wrapper svg {
    width: 60px !important;
    height: 60px !important;
}
}

Here is the result:

image_480.png
image_480.png266×480 28.3 KB

I hope this helps

Best,

Daisy

7

Hi @EdensBakehouse , thanks for reaching out.

To address the issue, please help me go to your Theme => Online store => Customize => Theme settings => Custom CSS and insert the following custom code:

@media only screen and (max-width: 749px){
.list-social__item .icon {
    width: 5.5rem !important;
    height: 5.5rem !important;
}
span.svg-wrapper {
    width: auto;
    height: auto;
}
}

You can take a look at the expected result here:

image (2).png
image (2).png382×824 42.7 KB

I hope my solution is helpful to you.

Esther.