Hi, I’ve been using the theme Ride, and I asked a question previously which helped me customise the Icon with Text section, I’m using it in 2 sections of a product page, 1 for fragrance and 1 for product details, attaching the fragrance screenshot here, the problem occurs in the mobile view, I coded the recommendation -
which fixed the fragrance view -
But the other icons with texts are skewed now 
I think because I edited the liquid file, it copied the same to the other icons as well, any way to separate or override it?
Hi @DonneWorld
Step 1: At Shopify Admin, Select Online Store → Themes → Edit Code
Step 2: Find and open the file base.css
Step 3: Add this code at the end of the file base.css
.icon-with-text--horizontal .icon {
min-width: 35px !important;
}
@media only screen and (max-width: 500px) {
.icon-with-text--horizontal {
column-gap: 1.2rem !important;
}
}
Step 4: Save your code!
Hope this can help you.
Kind regards,
1 Like
Thank you 
It altered the icon, they’re well sized now, I’m still having trouble with the text though ?
I’ve tried modifying the h5 text to a smaller size to no avail
Do you have any idea how I can fix that? Or at least have the complete words?
Hi @DonneWorld
This is BSS Commerce - Full-service eCommerce Agency. We’d love to suggest you this solution:
You just need to add this code at the end of the base.css file. You can customize the font size to suit you according to the px value in the font-size (here it is 14px)
@media only screen and (max-width: 500px) {
h5, .h5 {
word-break: unset !important;
font-size: 14px !important;
}
}
Hope this can help you.
Kind regards,
1 Like
Thank you so much for the help!!!
