Icon With Text - Product Page Issue

Shopify Discussion
1

Hello,

Does anyone have a resolution for my icon with text on product page issue? Basically, only on mobile, my text is hyphenated and doesn’t look good. Is there a way to code it so that there is not hyphenations and it is full words? Or I may have to make the text smaller only on mobile? What is the code for both of these options? Thank you very much. Ella.

URL: https://www.livwithin.com.au/products/moss

Screenshot 2025-03-24 at 13.32.18.png
Screenshot 2025-03-24 at 13.32.18.png740×1708 185 KB

2

Hello @ellacoker ,

For mobile, you can stop the hyphenation and adjust text size using CSS. If you want to disable hyphenation entirely, try adding something like this to your theme’s CSS:

.icon-text {
-webkit-hyphens: none;
-moz-hyphens: none;
hyphens: none;
}

If you prefer to adjust the text size on mobile to avoid hyphenation, you can wrap that in a media query. For example:

@media only screen and (max-width: 768px) {
.icon-text {
font-size: 14px; /* Adjust as needed */
}
}

Just replace .icon-text with the actual class or selector used for your icon with text. These tweaks should help display the text as full words without unwanted hyphenation or overly small text.

3

Hey @ellacoker ,

It sounds like your issue is related to CSS text formatting on mobile. You have two main options to fix it:

Option 1: Prevent Hyphenation

You can use the hyphens: none; property in your CSS to prevent automatic hyphenation.

.product-page-text {
  hyphens: none;
  word-break: break-word;
  overflow-wrap: break-word;
}

Option 2: Reduce Font Size on Mobile:

If you’d like to make the text smaller only on mobile screens, you can use a media query:

@media (max-width: 768px) {
  .product-page-text {
    font-size: 14px; /* Adjust as needed */
  }
}

If you need help applying this to your Shopify theme, please feel free to reach out in my signature below—I’m here to help bring your vision to life!

If I was able to help you, please don’t forget to Like and mark it as the Solution!

Best,

Rajat

[Shopify Expert]

4

Hello,

This doesnt seem to be working. I also only want to target the icon with text - text. Where do I put this code? Base.css?

5

Hey @ellacoker ,

Try adding this to base.css:

Prevent Hyphenation:

.icon-with-text {
  hyphens: none;
  word-break: normal;
  overflow-wrap: break-word;
}

Reduce Font Size on Mobile:

@media (max-width: 768px) {
  .icon-with-text {
    font-size: 14px; /* Adjust as needed */
  }
}

If it doesn’t work, check if the class is correct using Inspect Element. Let me know!

6

Hello,

I have added this all to base.css but still not working, It’s not so much the hyphenations, its that the words are breaking up for some reason. Thank you

7

I understand the issue you’re facing—no worries at all! To properly diagnose and fix this, I’ll need access to your store to check the exact placement of the code and ensure it’s working correctly. If you’re comfortable with this, feel free to send me the Collab code and store URL via email, and I’ll take care of it.

Looking forward to helping you out! Thanks