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

Squarespace 7.1Tutorials
Written By Primitus Consultancy

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

/* CSS FOR MOBILE */
@media only screen and (max-width: 640px) {
/* Start Insert Code for Mobile*/


/* End Insert Code for Mobile*/
}

Use this code to resize Site Title 

#site-title {
font-size: 1.3rem;
}

Use this code to resize Logo

.header-title-logo img {
max-height: 50px; 
}

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

/* CSS FOR MOBILE */
@media only screen and (max-width: 640px) {
/* Start Insert Code for Mobile*/

.header-title-logo img {
max-height: 60px; 
}
#site-title {
font-size: 1.3rem;
}

/* End Insert Code for Mobile*/
}
Featured
side-bar-logo.png
Plugins-Button.jpg
Templates-Button.jpg
SEO-Button.jpg
11help-Button.jpg
 
Home Blog
Primitus Consultancy

We work with small and medium-sized businesses to help create a professional online presence. We provide a one shop full-service design studio in London, United Kingdom. 

https://primitusconsultancy.co.uk
Previous

How to block countries from your Squarespace website.
Next

How to resize product images on Squarespace 7.1 for mobile screens