Hey Everyone!
I’m looking to increase the size of my icon images in multicolumn so that they are legible on mobile.
I have the desktop size dialed in so I don’t want to change anything there.
Any help is appreciated!
Natalie
Topic summary
A user needed to increase the size of icon images in the multicolumn section on mobile devices while keeping desktop sizing unchanged.
Solution Provided:
Two CSS-based approaches were offered:
- Custom CSS via theme.liquid - Add styling code above the
</body>tag - CSS file modification (accepted solution) - Add media queries to main.css/base.css:
- For screens under 989px: set image wrapper width to 50%
- For screens under 749px: set image wrapper width to 70%
Outcome:
The CSS modification successfully resolved the issue. The user confirmed the solution worked and marked it as resolved.
1 Like
Hi @1733650
Would you mind sharing your store URL? Thanks!
Hey @1733650
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
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
1 Like
Thanks for the info, check this one.
From you Admin page, go to Online Store > Themes
Select the theme you want to edit
Under the Asset folder, open the main.css(base.css, style.css or theme.css)
Then place the code below at the very bottom of the file.
@media only screen and (max-width: 989px){
.multicolumn-card__image-wrapper--third-width {
width: 50%;
}
}
@media only screen and (max-width: 749px){
.multicolumn-card__image-wrapper--third-width {
width: 70%;
}
}
And save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
It worked! Thank you so much! 
1 Like
Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.