Change size social media icons on MOBILE ONLY

Solved

Change size social media icons on MOBILE ONLY

EdensBakehouse
Excursionist
26 0 9

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 😞

 

Please help!

Accepted Solution (1)

DaisyVo
Shopify Partner
3579 398 484

This is an accepted solution.

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

 

I hope this helps

 

Best,

 

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

View solution in original post

Replies 6 (6)

suyash1
Shopify Partner
10555 1304 1671

@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;}
}
Support me | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
EdensBakehouse
Excursionist
26 0 9

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

suyash1
Shopify Partner
10555 1304 1671

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

Support me | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

S18
Shopify Partner
26 2 2

hey @EdensBakehouse plz share your store URL

DaisyVo
Shopify Partner
3579 398 484

This is an accepted solution.

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

 

I hope this helps

 

Best,

 

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

EstherBui
Excursionist
275 39 41

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

I hope my solution is helpful to you.

 

Esther.

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!