How to resize Site Title and Logo on Squarespace 7.1 for mobile screens

In this tutorial, you will learn how to resize the site title and logo specifically for mobile screens on Squarespace 7.1. Squarespace 7.1 provides the option to edit the site title and logo for both desktop and mobile within the editor. However, while Squarespace automatically adjusts your website for different screen sizes, the drawback is that the rendering on mobile screens is dynamic, and you may not have precise control over the design without using custom code. By following the steps outlined in this tutorial, you'll be able to intervene and customize the sizing of your site title and logo for mobile screens, ensuring optimal visibility and a cohesive design on Squarespace 7.1.

Complexity: Easy

To resize Site Title and Logo on Squarespace 7.1 for mobile screens, simply copy the code below:

Mobile Breakpoints

Use this code to resize Site Title

Use this code to resize Logo

For a full working example which you will paste in your Design > Custom CSS is shown below:

You can also look at our other posts

How to optimise your Squarespace website 7.1 for mobile screens
How to resize product images on Squarespace 7.1 for mobile screens