Unnecessary padding/gap between text and underline decoration

Hi. I'm relatively new to Squarespace but have been developing a new website for a church. I have managed to get to the 11th hour without any problems (only solutions (!) from you trusty folk) but alas, I've been hit with one and it's a real head scratcher.

I noticed that suddenly out of the blue a gap has appeared between text and a decorative underlines (I've been using the curve style and the hand-drawn squiggly one throughout the site) I have tested with a few other decorative styles and they all seem to shift a bit once I come out of the editing mode however they are behaving and sitting where they should whilst in editing mode. This wasn't a problem yesterday so something has happened since then. I have removed any custom CSS injections and refreshed but that didn't help so I have added them back in again.

I'm wondering if there is a global setting for padding but I can't find it or if anyone has some sort of solution to my problem? Going live in a few days time and would really like to get to the bottom of it before then.

Note: I also have noticed that the problem is also occurring in the navigation titles when they become underlined. Meanwhile,  various hyperlinks throughout the site seem to be fine and have an appropriate underline.

I've attached 3 screen grabs of the issue and 1 screen grab of how it used to look when the issue wasn't an issue!

Many thanks in advance,

Matt

Hi,

Can you share link to page? We can check easier

Was this resolved? I'm experiencing the same

I have not experienced any issues with underlining personally, but I haven't tested all use cases. If you'd like us to try to reproduce the issue, please provide a link to the page on your site so we can take a look.

Alternatively, feel free to reach out to Squarespace Customer Support.

The site is not live currently. I have deleted every bit of code on the site, and still no changes. I started to create a brand-new website from scratch and no problem - so not my laptop or browser. 

1 minute ago, FredPerrie said:

The site is not live currently. I have deleted every bit of code on the site, and still no changes. 

If you'd like to provide us with a link, the guide How to Post a Forum Question explains how to do this for a trial site.

Alternatively, feel free to reach out to Squarespace Customer Support. They'll have direct access to your site and, if all code has been removed, they should be able to resolve this for you.

I'm experiencing the exact same problem.
I didn't change anything on my website's code but for a week or so now the underline links became broken in some places. In the top menu it's still ok, but in the About Page the underline is way off position :

https://camillemarotte.com/contact

If I replace the whole animation on the page to anything else than Flex the underlining is back to normal.

If I switch back to Flex the underlining goes crazy again.

For the navigation menu the underline works fine.

6 hours ago, Aerion said:

If I replace the whole animation on the page to anything else than Flex the underlining is back to normal.

If I switch back to Flex the underlining goes crazy again.

For the navigation menu the underline works fine.

Hi, can you contact SquareSpace Custom Support and let us know what they say?

16 hours ago, melody495 said:

Hi, can you contact SquareSpace Custom Support and let us know what they say?

Hey Melody,

Ho I thought that was the way Squarespace support was working.

So about my underlining problem, you don't have a least some pointers for me?

Cheers,

17 minutes ago, Aerion said:

I thought that was the way Squarespace support was working.

This is a peer-to-peer forum where Squarespace users help other users. Squarespace doesn’t use this forum to track bug reports (see the guidelines - item 7).

To report the issue to Squarespace contact Squarespace Customer Support using a support ticket.

23 minutes ago, Aerion said:

So about my underlining problem, you don't have a least some pointers for me?

I think it's a possibly a SquareSpace issue. Can you check with them and come back to let us know what they say, and we can see if there is a workaround.

25 minutes ago, Aerion said:

Ho I thought that was the way Squarespace support was working.

See what @paul2009 said above 👍

On 12/15/2023 at 7:24 PM, melody495 said:

I think it's a possibly a SquareSpace issue. Can you check with them and come back to let us know what they say, and we can see if there is a workaround.

See what @paul2009 said above 👍

Ok I understand, I thought maybe it was a bit of my code or design that had an issue. I already contacted the Customer Support, let's see what they say 😉

Well my issue is still not resolved, and it's quite a problem because it's affecting my "Contact" page pretty deeply :

https://camillemarotte.com/contact

I'm still not sure if it's really a Squarespace animation wide issue or if it's any kind of conflicts in my design.
Any pointers would be very much appreciated.

The only temporary workaround for me now is to use this code to remove underline links throughout entire website (not ideal) :

.sqs-block-html a {
  background-image: none !important;
  background-repeat: no-repeat !important;
 text-decoration: no-repeat !important;
}

On 12/17/2023 at 9:45 AM, Aerion said:

 I already contacted the Customer Support, let's see what they say 😉

Did support get back to you on this? What did they say?

5 hours ago, Aerion said:

The only temporary workaround for me now is to use this code to remove underline links throughout entire website (not ideal) :

.sqs-block-html a {
  background-image: none !important;
  background-repeat: no-repeat !important;
 text-decoration: no-repeat !important;
}

See below, these are the CSS that sets the underline for your links. You can see the box is overlapping, going into the lower line, hence the underline issue.

You can change a number of these CSS to make your underline not overlap. But I think try this.

// This applies to all <a>, choose specific selector where appropriate
a {
	display: inline-block;
}

This will apply to all a tags. If you only want this for the contact page, you can either use the collection ID or each block ID to target specific texts/pages.

Then you won't need the CSS you've used to remove underline for all links site wide.

Let me know how it goes.

1 hour ago, melody495 said:

Did support get back to you on this? What did they say?

See below, these are the CSS that sets the underline for your links. You can see the box is overlapping, going into the lower line, hence the underline issue.

You can change a number of these CSS to make your underline not overlap. But I think try this.

// This applies to all <a>, choose specific selector where appropriate
a {
	display: inline-block;
}

This will apply to all a tags. If you only want this for the contact page, you can either use the collection ID or each block ID to target specific texts/pages.

Then you won't need the CSS you've used to remove underline for all links site wide.

Let me know how it goes.

Hey Melody,

And thx a lot for your reply.

I'm not sure I understand your idea correctly, did you simply used this code in the Custom CSS?

I tried but nothing happened, I removed my added code and it's back to "broken".
What is strange is that it was all working perfectly great before and you can see in the top menu the underline is much closer to the text for example.

I can see on your screenshot the "box" overlapping yes, but is there a way to make this "box" smaller in height without changing my font then?

Thx for your patience helping me 🙂
 

The customer care only replied this, which didn't help 😕

14 hours ago, Aerion said:

I'm not sure I understand your idea correctly, did you simply used this code in the Custom CSS?

I tried but nothing happened, I removed my added code and it's back to "broken".

Hi, yes in Custom CSS. You might need to add !important

// This applies to all <a>, choose specific selector where appropriate
a {
	display: inline-block !important;
}

But this will apply to all your links. Do you just need your Contact page fixing? If so, you need to target just those 2 text blocks, like this

/* Fix overlapping underline for Contact page */
#block-6d6d9f00c1175ee65925, #block-63307b2791fe7834a89d {
  a {
      display: inline-block !important;
  }
}

Click save, refresh page. Let me know how it goes.

5 hours ago, melody495 said:

Hi, yes in Custom CSS. You might need to add !important

// This applies to all <a>, choose specific selector where appropriate
a {
	display: inline-block !important;
}

But this will apply to all your links. Do you just need your Contact page fixing? If so, you need to target just those 2 text blocks, like this

/* Fix overlapping underline for Contact page */
#block-6d6d9f00c1175ee65925, #block-63307b2791fe7834a89d {
  a {
      display: inline-block !important;
  }
}

Click save, refresh page. Let me know how it goes.

Ho wow, yes it worked !

Thank you so much it was bothering me for weeks !

Just for me knowledge then, the fact that that we had the "inline-block" means that the underline would not count the actual text block height?

And what does adding "!important" changes?

I did a bit of C++ back in the days, but this code looks very funny to me 🙂

Thx again !

2 hours ago, Aerion said:

Thank you so much it was bothering me for weeks !

You are very welcome 😊 Please do give my post a thumbs up and mark as the solution to help others find the solution easier.

2 hours ago, Aerion said:

Just for me knowledge then, the fact that that we had the "inline-block" means that the underline would not count the actual text block height?

It's actually the opposite. inline-block will respect the height. You can read more here! CSS inline vs inline-block

2 hours ago, Aerion said:

And what does adding "!important" changes?

important overrides any other styling that may be applied to the element. More here How to use !important in CSS

2 hours ago, Aerion said:

I did a bit of C++ back in the days, but this code looks very funny to me 🙂

web dev is very different to C++, I can't say I miss it. I'm sure you'll pick it up in no time! Have fun 😄