Jump to content

How do I match the section title of lists to H1 styling in Squarespace 7.1?

Go to solution Solved by tuanphan,

Recommended Posts

I'm having trouble getting the list section title to match the heading styling of the rest of my site (which uses H1). I have tried the attached code, matching the font size to the H1 size (which is 4rem). This works for desktop, however, when I switch to mobile, the heading size no longer matches the rest of my site. 

Is there a way to get the list section title to always match H1 styling, regardless of whether its dektop or mobile, rather than inputting a manual size (4rem)? 

I am already overriding header styling with a custom font (larken) by the way. And I am not yet able to publish the site, so I cannot give anyone direct access, other than the below screenshots. 

Screenshot 2023-08-01 at 12.57.33 PM.png

Screenshot 2023-08-01 at 12.57.42 PM.png

Screenshot 2023-08-01 at 12.57.53 PM.png

Screenshot 2023-08-01 at 12.58.16 PM.png

Screenshot 2023-08-01 at 12.58.39 PM.png

Link to comment

Hi Holly, because the heading size is different on mobile, you'll need to use two codes - one for mobile and one for desktop. Easy fix 😊

Can you share a link to your site?

If this helped you, please like or mark my solution as answer so others can scroll to it quickly 👆

Cass Aggett is a Squarespace website designer for go-getting women – no matter what stage of business.

WEBSITEINSTAGRAM

 

Link to comment
On 8/1/2023 at 2:25 PM, hollykmsmith said:

Hi Cass,

The link is https://aspiring-dental.squarespace.com and the password is Aspiring-Dental-2023 (it's currently set to private).

Thanks so much for your help!

Thanks, sorry I didn't see your reply.

Try this:

@media screen and (max-width: 767px) {
  .list-section-title * {
    font-size: calc((var(--heading-1-size-value) - 1) * calc(.012 * min(100vh, 900px)) + 1rem) !important;
  }
}

(I didn't make this up, it's what the mobile version of H1 is set to haha)

If this helped you, please like or mark my solution as answer so others can scroll to it quickly 👆

Cass Aggett is a Squarespace website designer for go-getting women – no matter what stage of business.

WEBSITEINSTAGRAM

 

Link to comment

Hi Cass, is this meant to replace what I've currently got there? Or do I add it underneath?

In both instances, I get an error message when pasting your code in, "operation on an invalid type."

 

And Tuanphan, the code that I have already used (the code you just pasted) works for desktop, but the sizing does not match the rest of the sections on mobile (see the screenshots I uploaded). 

Link to comment
  • Solution
On 8/4/2023 at 6:35 AM, hollykmsmith said:

Hi Cass, is this meant to replace what I've currently got there? Or do I add it underneath?

In both instances, I get an error message when pasting your code in, "operation on an invalid type."

 

And Tuanphan, the code that I have already used (the code you just pasted) works for desktop, but the sizing does not match the rest of the sections on mobile (see the screenshots I uploaded). 

When use calc symbol in CSS, you need to add some ~ and " character. Change code @CassAggett to this

@media screen and (max-width: 767px) {
  .list-section-title * {
    font-size: calc(~"(var(--heading-1-size-value) - 1) * calc(.012 * min(100vh, 900px)) + 1rem") !important;
  }
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a 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.