Shopify themes, liquid, logos, and UX
I want to make my website responsive to mobile view, and for the footer I have added my brand logo - this looks good in the desktop view but when I am looking on my phone the logo looks quite big. How can I change the size of the image just for my phone.
Solved! Go to the solution
This is an accepted solution.
@KN2002 please add this css to the very end of your base.css file and check,
Shopify Admin -> Online Store ->Theme -> Edit code -> base.css
@media screen and (max-width:749px){
.footer-block__image-wrapper img {max-width: 70%; margin: 0 auto;}
}
My website is not live yet, it is still wip.
renovawears.in
Shared on message
This is an accepted solution.
@KN2002 please add this css to the very end of your base.css file and check,
Shopify Admin -> Online Store ->Theme -> Edit code -> base.css
@media screen and (max-width:749px){
.footer-block__image-wrapper img {max-width: 70%; margin: 0 auto;}
}
This did not work 😞
made this change, but it is still not working 😞
@suyash1 Hey, the solution worked - I applied it on the custom css. thanks so much 🙂
Any idea if we can also change the padding between image and quick links (next section in the footer)?
@KN2002 - add this as well
@media screen and (max-width:749px){
.footer-block__details-content.footer-block-image {margin-bottom: 0rem;}
.footer-block-image .footer-block__image-wrapper {margin-bottom: 1rem;}
}
@KN2002
Please share your store live link with your Password. So I can see your store and would be help for you.
Shared through message
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025