Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
This is an accepted solution.
@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;
}
}
I hope this helps
Best,
Daisy
@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;}
}
I pasted this in the base.css, but nothing happens.
@EdensBakehouse - not abler to see it on browser, can you please add it again at the very end?
This is an accepted solution.
@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;
}
}
I hope this helps
Best,
Daisy
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:
I hope my solution is helpful to you.
Esther.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025