Jump to content

Unnecessary padding/gap between text and underline decoration

Recommended Posts

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

WhatsApp Image 2023-09-06 at 22.17.21.jpeg

Screenshot 2023-09-06 at 22.39.50.png

Screenshot 2023-09-06 at 22.40.09.png

Untitled 5.png

Link to comment
  • 3 months later...

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.

Edited by paul2009

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Would you like your customers to be able to mark their favourite products in your Squarespace store?

Link to comment
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.

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Would you like your customers to be able to mark their favourite products in your Squarespace store?

Link to comment
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?

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Nerd

💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
🧰 See the tools I use (contain affiliate links)
 Did I help? I like coffee (Thank you)

Link to comment
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.

Edited by paul2009

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Would you like your customers to be able to mark their favourite products in your Squarespace store?

Link to comment
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 👍

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Nerd

💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
🧰 See the tools I use (contain affiliate links)
 Did I help? I like coffee (Thank you)

Link to comment
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 😉

Link to comment
  • 2 weeks later...

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.

Square.png

 

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

Edited by Aerion
Link to comment
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.

image.thumb.png.c395e68648a0c0ff6e6760b148ce322f.png

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.

image.png.de45cfb9cf2cca16bf17e8edc71ace3e.png

Let me know how it goes.

Edited by melody495

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Nerd

💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
🧰 See the tools I use (contain affiliate links)
 Did I help? I like coffee (Thank you)

Link to comment
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.

image.thumb.png.c395e68648a0c0ff6e6760b148ce322f.png

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.

image.png.de45cfb9cf2cca16bf17e8edc71ace3e.png

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 😕

 

Zoe K. (Squarespace)

Dec 17, 2023, 4:26 PM EST

Hi Camille,
 
Greetings from Portland, OR. My name is Zoe and I'm happy to help you today. We truly appreciate your patience as we're currently working through a record number of requests.
 
Thanks for contacting us about this. We’ve noted your report with our Engineering and Design teams for review. They’ll use this feedback when creating fixes and improvements for future releases.
 
There are many variables that we need to test against before we can make changes, and we can’t guarantee changes for this issue in the immediate future. That said, our teams consider all feedback, and your input is always encouraged.
 
For now, we recommend using a different site-wide animation other than Flex so this behavior doesn't occur. To be clear, this is a temporary workaround, rather than a permanent fix for the issue.
 
Thanks again for reporting this, and if you see any other unusual behavior, please let us know.
 
Warm Regards,

Zoe K.

 

Edited by Aerion
Link to comment
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.

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Nerd

💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
🧰 See the tools I use (contain affiliate links)
 Did I help? I like coffee (Thank you)

Link to comment
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 !

Edited by Aerion
Link to comment
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 😄 

Edited by melody495

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Nerd

💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
🧰 See the tools I use (contain affiliate links)
 Did I help? I like coffee (Thank you)

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.