Re: Removing hyphens/dashes from product name on collection grid

Removing hyphens/dashes from product name on collection grid

lukewalsh91
Visitor
3 0 0

Hello there,

 

I'm having an issue with product titles not appearing as two separate lines in collections on mobile.

 

Some product titles are being unnecessarily hyphenated, as you can see in the examples below. 

 

Instead of simply being Swimming Trunks as one line then Orange underneath, it shows OR- ANGE as separate lines.

 

This looks very amateur and I'm trying to fix this asap.

 

Any help would be very much appreciated, 

 

Thanks

LukeScreenshot 2023-10-21 at 10.49.03.pngScreenshot 2023-10-21 at 10.55.40.png

 

Replies 7 (7)

Uhrick
Shopify Partner
433 68 102

Hello, Lukewalsh91, can you please share the url to your store?

Shopify Developer
Hire me for theme customizations at ricardomsilvestre@outlook.com or Upwork
Was my answer helpful to you? Please like or mark as solution

ChiaraG
Tourist
3 0 1

Did you solve the issue? I am having the same problem... 

Uhrick
Shopify Partner
433 68 102

hello, ChiaraG, can you share your url? He didn't, maybe seeing yours I can help

Shopify Developer
Hire me for theme customizations at ricardomsilvestre@outlook.com or Upwork
Was my answer helpful to you? Please like or mark as solution
ChiaraG
Tourist
3 0 1

Hello, thank you! The url is this https://addvent.it/collections

and the problem is everywhere, not just on mobile. It's based on the classic Debut theme. I'm trying to fix the collection's titles hyphenation, that look bad

Uhrick
Shopify Partner
433 68 102

I'm not allowed to right click on the website or open the inspection tools, I can't find out anything like this...

Shopify Developer
Hire me for theme customizations at ricardomsilvestre@outlook.com or Upwork
Was my answer helpful to you? Please like or mark as solution
Uhrick
Shopify Partner
433 68 102

@ChiaraG Ok, I was able to mess with it a little bit, by entering the page with the inspection tool already open. Anyway, go to online store > themes > '...' button > edit code.

Then, find a file like 'styles.css' or 'theme.css' or 'base.css', or anything with a name a bit more general like that. Then, at the end of this file, add this:

.collection-grid-item__title {

hyphens: none;

}

Shopify Developer
Hire me for theme customizations at ricardomsilvestre@outlook.com or Upwork
Was my answer helpful to you? Please like or mark as solution
ChiaraG
Tourist
3 0 1

You literally saved my day! Thank you so much!!