Icon with Text - Section customise - Ride Theme

Store Design
,

Topic summary

A user working with Shopify’s Ride theme encountered layout issues in the Icon with Text section on mobile view. After implementing a previous CSS fix for fragrance icons, other icons with text became skewed.

Initial Problem:

  • Mobile view displayed distorted icons and text alignment
  • Issue affected multiple Icon with Text sections on product pages

Solutions Provided:

BSS-Commerce offered two CSS fixes to add to the base.css file:

  1. Icon sizing fix - Added media query targeting .icon-with-text--horizontal to set minimum icon width (35px) and column gap (1.2rem)

  2. Text wrapping fix - Adjusted h5 font size to 14px and modified word-break properties to prevent text cutoff

Outcome:
Both solutions successfully resolved the mobile display issues. The user can customize font size values in the CSS to further adjust the appearance according to their preferences.

Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.
1

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 -

Screenshot 2023-04-09 at 10.42.50 PM.png
Screenshot 2023-04-09 at 10.42.50 PM.png712×936 92.7 KB

But the other icons with texts are skewed now :worried:

Screenshot 2023-04-09 at 10.45.25 PM.png
Screenshot 2023-04-09 at 10.45.25 PM.png698×930 166 KB

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?

2

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
3

Thank you :slightly_smiling_face:

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

Screenshot 2023-04-10 at 5.31.28 PM.png
Screenshot 2023-04-10 at 5.31.28 PM.png688×636 123 KB

Do you have any idea how I can fix that? Or at least have the complete words?

4

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
5

Thank you so much for the help!!!