Jump to content

Order confirmation — Line-height problem

Recommended Posts

Site URL: https://www.madleennilsson.com/


I have a problem with the line-height of the text showing up after a purchase, telling the buyer about the download of the digital products the've purchased. See attached images.  

The big bold text is H3 and I have removed custom CSS for that before taking these screenshots. I can adjust the line-height of the H3 with custom CSS, but I don't know how to change the line-height of the linked zip-files shown beneath, that the customers are supposed to click on — without also changing the line-height of all other links on the page. Is there anyone here who knows how to solve this problem?


In the screenshots — it's a purchase of two files — but they are shown on top of each other. So the line-height is very off.

Skärmavbild 2020-07-21 kl. 11.36.49.png

Skärmavbild 2020-07-21 kl. 11.37.05.png

Link to comment
  • Replies 2
  • Created
  • Last Reply

From the screenshots, it appears that your 'Heading 3' line height is set to 0.5em, when it should ideally be at least 1.3em.

To check/change this:

  1. Open a page that contains a heading formatted as h3. If you don't have one, create a page temporarily and add a Heading 3.
  2. Open the Site Styles panel.
  3. Find Heading 3 setting, and change the line height. 
  4. Save the settings.
  5. Re-check your purchase notifications.


About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too.

Link to comment


This topic is now archived and is closed to further replies.

  • 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.