Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Hyperlink underline gap is too big


Recommended Posts

Site URL: https://localdesigncircle.com/articles/posterjam-offbeat-typethursday-january

Hello,

I just recently published my website and connected it to a third-party managed domain. 
The problem I have is that the gap between the hyperlink text and the underline is too big, all of a sudden.

Before connecting my domain it was all good, but now it's a big gap, that gets over the text beneath.

I tried unlinking and linking it again with no success. Even for new added links the story is the same.
I also tried to see if it's a problem with the text line spacing, but it's not. Changing it does not affect the gap.

The problem even persists on mobile.

Attached, you can find a screenshot with the problem.

Thanks!

Screenshot 2020-02-06 at 19.58.18.png

Edited by Grosu
Link to post
  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

In case this helps anyone, I used what @tuanphan wrote above and arrived at a solution: h2 a {     position: relative;     width: auto;     display: inline-block;     height: 1.15em; }

Posted Images

10 hours ago, ralaningalls said:

The link underline on my site is also exhibiting this large gap between the text and underline. My site is https://www.theattnco.com/home

Add to Page Settings > Advanced > Header

<style>
main#page a {
    background-image: none;
    position: relative;
    width: auto;
    display: inline-block;
}
  main#page a:after {
    content: "";
    background: black;
    display: block;
    position: absolute;
    bottom: 20%;
    z-index: 999;
    width: 100%;
    height: 1px;
    left: 0;
    right: 0;
}
</style>
  

adjust gap with bottom: 20%;

Link to post
  • 4 months later...

I am having this same issue as well.  It is almost like something is wrong in the Squarespace global style sheet.  The gaps look ridiculous.  We shouldn't have to use custom CSS to have the URL underline actually under the text. It looks more like a table line than an actual text underline.  Any idea how to reduce the gap without actually turning it into a table?  I know others have had this issue.

  527405971_ScreenShot2020-07-08at8_42_14AM.png.2aa00ff18e316abed6cfc7c9ff4d34e6.png

Link to post
On 7/8/2020 at 7:45 PM, betsymintontech said:

I am having this same issue as well.  It is almost like something is wrong in the Squarespace global style sheet.  The gaps look ridiculous.  We shouldn't have to use custom CSS to have the URL underline actually under the text. It looks more like a table line than an actual text underline.  Any idea how to reduce the gap without actually turning it into a table?  I know others have had this issue.

  527405971_ScreenShot2020-07-08at8_42_14AM.png.2aa00ff18e316abed6cfc7c9ff4d34e6.png

Can you share link to your site? We can check easier.

Link to post
  • 4 months later...
8 hours ago, Kacia said:

Wow, amazed that everyone has had this issue too! And annoyed with Squarespace; why does this issue exist?

Would love help moving my lines closer to the text as well. The issue seems only to exist with headers; paragraph links are fine.

You can see the issue throughout this page: https://vibraphone-dove-dpfn.squarespace.com/our-approach (password He@1ing).

Thank you!!

Kacia

Hi. Can you take a screenshot? We can check easier

Link to post

In case this helps anyone, I used what @tuanphan wrote above and arrived at a solution:

h2 a {
    position: relative;
    width: auto;
    display: inline-block;
    height: 1.15em;
}


h3 a {
    position: relative;
    width: auto;
    display: inline-block;
    height: 1.15em;
}

I'm not sure if this is the best way to do it, but it worked so I'll go with it for now.

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...