Issue with card heading underline width in Dawn theme 15.0.1

[adkowaty]

Hello,

I'm trying to style the card heading and I'm facing an issue with the underline width. I want the underline to match the exact width of the text. I'm currently using the Dawn theme (version 15.0.1).

Below is the CSS I'm using (which works perfectly for the most part):

.card__heading a {
font-size: 16px !important;
font-weight: 700 !important;
color: #000 !important;
text-decoration: none !important;
position: relative !important;
display: inline-block !important;
}
.card__heading a:hover {
color: #ff33fd !important;
}
.card__heading a::after {
content: '' !important;
position: absolute !important;
width: 0 !important;
height: 2px !important;
background-color: #ff33fd !important;
bottom: 0px !important;
top: 23px!important;
left: 0 !important;
transition: width 0.3s ease !important;
}
.card__heading a:hover::after {
width: 100% !important;
}
.card-information>* {
-webkit-line-clamp: 1 !important;
-webkit-box-orient: vertical !important;
display: -webkit-box !important;
overflow: hidden !important;
}

The problem arises when I add the following properties to .card__heading a:

-webkit-line-clamp: 1!important;
-webkit-box-orient: vertical!important;
display: -webkit-box!important;
overflow: hidden!important;
line-height: 25px!important;
transition: color 0.3s ease!important;

After adding these lines, I'm unable to make the underline match the length of the product title anymore.

Do you have any suggestions on how to resolve this issue?

Thank you in advance for your time and help.

Best regards,
Adrian

[Mustufa1]

hello adkowaty can you plz your website URL so i can help you 

[Sangeetanahar]

hello @adkowaty 

Go to online store ----> themes ----> actions ----> edit code ---->assets ---->base.css...> ...line number 4228

search the code

.card__heading, .price, .product-form, .card__badge {
  width: 100%; 
    text-align: center;
}

and replace with new code

.card__heading, .price, .product-form, .card__badge {

    text-align: center;
}

If this was helpful, hit the like button and accept the solution.
Thanks

[adkowaty]

Hello Sangeetanahar,

You are a genius—thank you! The issue is mostly resolved, but I’ve encountered a strange problem. The fix is now working across all collections except for one on the home page.

If you could take a look, I’d be really grateful.
Website: www.vapelounge.uk
Password: vl

When you're on the site, you'll notice that the fix is applied to all .card_heading a { elements, except for the "Mix and Match Disposables" section. Do you have any idea why this might be happening?

Thanks so much for your time and help!

Best regards,
Adrian

[adkowaty]

Noticed one problem more just now because of my code collection list is not clickable. 😕

[adkowaty]

I just noticed that the underline is longer than the product title, not only in the "Mix and Match Disposables" collection but also in the CBD and New Arrivals collections. It's strange because the underline is not working correctly on the Disposables and CBD collection pages, while it works fine on the other collection pages.

I'm not sure what's going on or why it works for some collections and not for others. Do you have any suggestions, please?

[websensepro]

Hi @adkowaty , kindly provide your store URL please. Thanks

[adkowaty]

Hi,

Sure, www.vapelounge.uk.

Thanks for your time and help in advance,

Regards,

Adrian

[Dan-From-Ryviu]

Hi @adkowaty 

You can try to update your code to this and check again 

      .card__heading { display: block; width: fit-content; }
      .card__heading a {
      font-size: 16px !important;
      font-weight: 700 !important;
      color: #000 !important;
      text-decoration: none !important;
      position: relative !important;
      display: inline-block !important;
      }
      .card__heading a:hover {
      color: #ff33fd !important;
      }
      .card__heading a:after {
      content: '' !important;
      position: absolute !important;
      width: 0 !important;
      height: 2px !important;
      background-color: #ff33fd !important;
      bottom: 0px !important;
      top: 23px!important;
      left: 0 !important;
      transition: width 0.3s ease !important;
      }
      .card__heading a:hover::after {
      width: 100% !important;
      }
      .card-information>* {
      -webkit-line-clamp: 1 !important;
      -webkit-box-orient: vertical !important;
      display: -webkit-box !important;
      overflow: hidden !important;
      }

[adkowaty]

Hi Dan-From-Ryviu,

Thank you for the CSS, but unfortunately, it doesn't work. 😕

Regards,

Adrian

Regards,

Adrian