hey I need help thinning the underlining on hovering the product cards on my home page
as seen in the pic above, I would like the the underline on “ALL HEAVENS” to be thinner.
thanks in advance
Topic summary
A user seeks help reducing the thickness of underlines that appear when hovering over product cards on their homepage. They want the underline beneath product titles (like “ALL HEAVENS”) to be thinner.
Proposed Solution:
A community member suggests adding custom CSS code through the theme.liquid file in the Shopify theme editor.
Outcome:
The suggested solution did not work. The original poster reports it failed to target the correct element and didn’t remove the text decoration as intended.
Resolution:
The user independently solved the problem by locating the ‘component-card.css’ file and adding text-decoration-thickness: 0.01em; to the .underline-links-hover:hover a selector.
Hi @viggostarcke ,
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file theme.liquid
Step 3: Paste the below code at the bottom of the file → Save
Hope my solution works perfectly for you!
Best regards,
Oliver | PageFly
sorry but does not. other than trying to remove the text-dec it doesnt also succeed in targeting the right element. ://
did however find out myself
under the file ‘component-card.css’ i find the targeting
‘.underline-links-hover:hover a’
and then add ‘text-decoration-thickness: 0.01em;’