Sudden change in hyperlink underline appearance

The link underlines throughout our 7.0 website have all moved far below the text. We do have custom code, but no one has touched it in maybe a year. This sudden change in appearance happened recently. Any suggestions about the cause or how to fix the problem? TIA!
Site url is https://www.famservcc.org

Here is what the links looked like originally:

Here is what the links look like now:

Thank you, tuanphan!! 

I received a message from Squarespace saying that the additional padding beneath text links is related to an issue on their end, which their engineers are working to fix. The problem only affects certain fonts such as Aktiv Grotesk. 

I used your code, but increased the line-height to 18 px. This worked, but only for the links on the homepage. Is there a way to target all links? Or will I need to add custom CSS for each type of link throughout the website? (For example, the footer link underlines are still too low.)

There is now a new problem: Long link text will not break into two lines as it did previously, resulting in large holes in the text. (See image.) Any advice?

Thank you for your help!

On 1/3/2024 at 12:38 AM, bark said:

Thank you, tuanphan!! 

I received a message from Squarespace saying that the additional padding beneath text links is related to an issue on their end, which their engineers are working to fix. The problem only affects certain fonts such as Aktiv Grotesk. 

I used your code, but increased the line-height to 18 px. This worked, but only for the links on the homepage. Is there a way to target all links? Or will I need to add custom CSS for each type of link throughout the website? (For example, the footer link underlines are still too low.)

There is now a new problem: Long link text will not break into two lines as it did previously, resulting in large holes in the text. (See image.) Any advice?

Thank you for your help!

 

Can you share link to this page where you have problem?

It's the home page, third paragraph (under Our Programs).

https://www.famservcc.org

#1. Use this code, it will apply to all image block link

.image-card a {
    line-height: 15px !important;
    display: inline-block;
}

#2. Remove code I sent & use this new code

.image-card a {
    border: None !important;
    background-image: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.25));
    background-repeat: repeat-x;
    background-size: 1px 1px;
    background-position: 0 100%;
    background-position: 0 calc(~"75% - 0.1em");
}

Thank you tuanphan!! This new code corrected all the problems on the homepage!

However, everywhere else on the site (footer and all other pages) the link underlines are still too far below the text. I think this is because we've only targeted image-card links, and those only appear on the homepage. I'm not sure how to target all the other site links. 

On 1/16/2024 at 7:12 AM, bark said:

Thank you tuanphan!! This new code corrected all the problems on the homepage!

However, everywhere else on the site (footer and all other pages) the link underlines are still too far below the text. I think this is because we've only targeted image-card links, and those only appear on the homepage. I'm not sure how to target all the other site links. 

Use this code for Footer

footer.Footer a {
    border: none !important;
    background-image: linear-gradient(rgba(255,255,255,0.75), rgba(255,255,255,0.75));
    background-repeat: repeat-x;
    background-size: 1px 1px;
    background-position: 0 100%;
    background-position: 0 calc(~"75% - 0.1em");
}

With other pages, can you share link to a page?

Thank you tuanphan!! This fixed the footer text links. The only problem is that now the social media icons in the far right footer column have underlines. 

Below are links to a couple sample pages. You'll see that links on those pages (including lists, email addresses, H3's, paragraph text, etc.) still have the underlines too far away. I'm not sure how to target all these different categories.

https://www.famservcc.org/program-overview

https://www.famservcc.org/selfhelp-center

On 1/17/2024 at 5:08 PM, tuanphan said:

Use this code for Footer

footer.Footer a {
    border: none !important;
    background-image: linear-gradient(rgba(255,255,255,0.75), rgba(255,255,255,0.75));
    background-repeat: repeat-x;
    background-size: 1px 1px;
    background-position: 0 100%;
    background-position: 0 calc(~"75% - 0.1em");
}

With other pages, can you share link to a page?

Change to this code

footer.Footer a:not([class*="icon"]) {
    border: none !important;
    background-image: linear-gradient(rgba(255,255,255,.75),rgba(255,255,255,.75));
    background-repeat: repeat-x;
    background-size: 1px 1px;
    background-position: 0 100%;
    background-position: 0 calc(85% - 0.1em)
}

On 1/26/2024 at 6:45 AM, bark said:

Thank you tuanphan!! This fixed the footer text links. The only problem is that now the social media icons in the far right footer column have underlines. 

Below are links to a couple sample pages. You'll see that links on those pages (including lists, email addresses, H3's, paragraph text, etc.) still have the underlines too far away. I'm not sure how to target all these different categories.

https://www.famservcc.org/program-overview

https://www.famservcc.org/selfhelp-center

 

Use this code

h3 a {
     border: none !important;
    background-image: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.25));
    background-repeat: repeat-x;
    background-size: 1px 1px;
    background-position: 0 100%;
    background-position: 0 calc(~"75% - 0.1em");
}

I have a similar issue. It looks wrong—particularly on the navigation link—but elsewhere too. I'm using Aktiv Grotesk. Please let me know if you have any insight. Thank you! 

22 hours ago, judokas said:

I have a similar issue. It looks wrong—particularly on the navigation link—but elsewhere too. I'm using Aktiv Grotesk. Please let me know if you have any insight. Thank you! 

If you share link to site, we can check easier