Resize the Site Title and Logo for Mobile

What does this code do?

This code snippet will allow you to resize the site title and logo when viewed from a mobile device.

Code Snippets

Copy and paste this code into Design > Custom CSS

@media screen and (max-width:640px) {
  CODE GOES HERE 
}

Squarespace 7.0

The size of the site title can be set in Design > Site Styles.

To adjust the mobile logo you can change the “Logo Width” under “Mobile Branding” in Design > Site Styles.

Squarespace 7.1

Copy and paste the appropriate code in between the brackets

/* Site Title */
#site-title {
  font-size: 1.2rem;
}

The size of the mobile logo can be set in the Header Site Title and Logo editor.

How To Use It

1. Copy and paste the code as indicated above or use the settings in the Squarespace Editor.

2. Edit the font-size to your liking.