Make product title underlined when pressed

[MiguelMaya]

Like the desktop version when hovering the mouse, I’d like the product title text to display underlined when pressed on the mobile version. Thanks.

https://misteri.ca

 

 

[Shadab_dev]

@MiguelMaya Inside your components-card.css file add this code at the bottom of the file.

@media screen and (max-width: 767px) {

.underline-links-hover a:active { text-decoration: underline; text-underline-offset: .3rem;}

}

If this helps you. please like and mark as solution.

For any further queries on web development,
Email

Buy me Coffee

Thanks anyways

[parth_ghelani · Accepted solution]

Hello @MiguelMaya 

To show underline in product title for mobile when pressed, you just need to follow below steps:

1. Go to shopify Admin > Online Store > Edit code.

2. In code directory, find the file named "base.css" and open the file.

3. Copy below mentioned code and paste it at the end of the file.

@media (max-width: 768px) {
 .product-card-wrapper .card__heading a:focus,
 .product-card-wrapper .card__heading a:active {
   text-decoration: underline;
   text-underline-offset: 3px;
 }
}

4. Don't forget to save the file after making changes.

Hope this solution works for your issue.

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Best Regards

Parth ghelani