Make product title underlined when pressed

Store Design
, , , , ,
1

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

IMG_0165.png
IMG_0165.png1179×2556 360 KB

IMG_0166.png
IMG_0166.png2556×1179 130 KB

2

@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

3

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;
 }
}
  1. 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