Jump to content

In Courses - Trying to change the displayed course title font

Go to solution Solved by tuanphan,

Recommended Posts

Any help greatly appreciated, 

I've been trying to change the h1 font to Adobe Handwriting Ernie (it's already used elsewhere in my site) on my Course Overview Page (hoping it will translate to the titles on other pages of the course). I don't want to make the sitewide change for all h1.  I've put the following code into the course settings' header code injection box -

h1, h1 * { 
    font-family: "adobe-handwriting-ernie" !important;
}

Help?

R 🙂

Link to comment
  • Replies 10
  • Views 1.9k
  • Created
  • Last Reply

Top Posters In This Topic

  • 4 months later...

Related question: I'd like to adjust the font size of my course title to better accommodate mobile view (the current title is splitting the first word in mobile) without changing overall h1 style for my site. 

Would love to know EITHER:
A: How to reduce course title font size
B: How to adjust for mobile responsiveness

...any thoughts appreciated!
THANK YOU

Link to comment
On 4/3/2024 at 1:41 AM, well_hello_jamie said:

Related question: I'd like to adjust the font size of my course title to better accommodate mobile view (the current title is splitting the first word in mobile) without changing overall h1 style for my site. 

Would love to know EITHER:
A: How to reduce course title font size
B: How to adjust for mobile responsiveness

...any thoughts appreciated!
THANK YOU

You can share link to page where we can see course title, we can give you code to do these easier

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
On 4/6/2024 at 4:22 AM, well_hello_jamie said:

@tunaphan - thanks for your help! The page is: https://www.jamiephillips.coach/reset-beta 

You can use this CSS code

h1.course-list__course-name.course-list__header-content {
    font-size: 38px !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
On 4/9/2024 at 4:18 AM, well_hello_jamie said:

@tunaphan - thank you! That did allow me to adjust header font size but I'm still getting a weird word-split in mobile view... will keep experimenting. Thanks! 

Can you take a screenshot of problem?

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
  • 2 weeks later...

@tunaphan sorry for the delayed reply on this. That code *does* modify the course title but, if it's small enough not to break the word "revolutionary" in mobile view, the title font size looks weirdly small on desktop. 

This might be wishful thinking, but is there a way to scale for mobile only view? (Or another solution?) 

THANK YOU!

Link to comment
On 4/7/2024 at 5:15 PM, tuanphan said:

You can use this CSS code

h1.course-list__course-name.course-list__header-content {
    font-size: 38px !important;
}

 

To apply it for mobile only, use this CSS code

@media screen and (max-width:767px) {
h1.course-list__course-name.course-list__header-content {
    font-size: 30px !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.