Jump to content

Different Header Sizes for different device sizes?

Recommended Posts

Site URL: https://bluebird-porcupine-yzdg.squarespace.com/

I was wondering if it is possible to have my header sizes (H1, H2, H3, H4) that are set on desktop to appear smaller on mobile device?

For example, currently I have my H1 set to 4.9rem on desktop, nice and big/bold so it suits my brand.

But on mobile device this is a little too big! I want to be able to reduce the headers (H1, H2, H3, H4) that appear on mobile if possible?

Please help!



Link to comment
  • Replies 5
  • Created
  • Last Reply

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
h1 {
	font-size: 1rem;
h2 {
	font-size: 2rem;
h3 {
	font-size: 3rem;


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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.