A user wants to increase the size of icons in their Shopify store’s “icon with text” section while keeping the text size unchanged. The PNG images are already at maximum resolution.
Problem Location:
Solutions Provided:
Two community members offered CSS code solutions to be added to the base.css file:
DaisyVo’s approach: Add custom CSS targeting the icon images with specific width/height values (65px suggested)
ul.icon-with-text img {
width: 65px !important;
height: 65px !important;
}
Dotsquares’ approach: More flexible CSS allowing custom sizing (200px example) while maintaining aspect ratio and centering
Status: The discussion remains open, awaiting confirmation from the original poster on whether either solution successfully resolved the issue.
Hello,
I would like to keep my icon with text text part the same, however i want to make the actual image bigger - probably double that size. How do I code this? The png is already maximum size.
Thank you.
URL: https://www.livwithin.com.au/products/moon
pw: pewpog
Hi @ellacoker
You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file
h2.related-products__heading.inline-richtext.h2 {
font-size: 20px !important;
}
Result
Best,
DaisyVo
Hi @ellacoker
You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file
ul.icon-with-text.icon-with-text--horizontal.list-unstyled li img {
width: 65px !important;
height: 65px !important;
}
Result
Best,
DaisyVo
Hi @ellacoker
Try adding the following CSS and let me know if this works or do you need an alternative solution.
/* Increase icon size without affecting text /
.icon-with-text img {
width: 200px !important; / Adjust size as needed /
height: auto !important; / Maintain aspect ratio */
}
/* Optional: Ensure icons remain centered */
.icon-with-text {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
