Jump to content

[Share] Change Site Title size

Recommended Posts

These CSS code will change Site Title size on All Pages, One Page, Desktop Only, Mobile Only,...

If you can't make it work, you can send site url, I will check again.

#1. Site Title size on All Pages

You can access Site Styles

image.png.26f4e7678a4da68d0721a4ec3a209e73.png

At Fonts > Click Arrow icon

image.thumb.png.d4108d631c3b370d0a68db2e811c77b3.png

 Click Assign Styles

image.thumb.png.abd08dde3ab94f4ad6eb814947b2fe08.png

Click Site Title (to change size on all devices) or Mobile Site Title (to change size on mobile only)

image.png.56e9519737ca7c06d2a343431665190e.png

#2. Site Title size on One Page only

First, you need to find Page ID. 

In my example, it is:

image.png.4c0cf1cccbd9b42193dfc84f0d44de60.png

Next, use CSS code like this

#collection-6673f2e18432c25013aee99f a#site-title {
    font-size: 50px !important;
}

image.png.37c6e1e111895f0c41a476bbcc1caed7.png

#3. Site Title size - One Page - Desktop Only

Similar #2, find Page ID, then use CSS code like this

@media screen and (min-width:992px) {
  #collection-6673f2e18432c25013aee99f {
    a#site-title {
        font-size: 50px !important;
    }
  }
}

#4. Site title size - One Page - Mobile only

Similar #2, find Page ID, then use CSS code

@media screen and (max-width:991px) {
#collection-6673f2e18432c25013aee99f {
    a#site-title {
        font-size: 50px !important;
    }
  }
}

#5. Before header scroll

header#header:not(.shrink) a#site-title {
    font-size: 50px !important;
}

#6. After header scroll

header#header.shrink a#site-title {
    font-size: 50px !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.