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

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.

Table of Contents

• Why Resize the Site Title and Logo on Mobile

• Step-by-Step Instructions

• Key Takeaways

• FAQs

• Conclusion

Why Resize the Site Title and Logo on Mobile?

On mobile screens, oversized logos or long site titles can:

• Appear cut off or compressed

• Disrupt your header layout

• Push navigation elements out of view

By manually resizing these elements, you ensure a cleaner, more balanced layout and preserve your brand’s visibility without sacrificing user experience.

Complexity: Easy

Step-by-Step Instructions

Step 1: To resize Site Title and Logo on Squarespace 7.1 for mobile screens, from the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and paste 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; 
}

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*/
}

Key Takeaways

• Custom CSS gives you granular control over the logo and site title on mobile.

• Resize elements to prevent overlap and maintain branding clarity.

• Always preview your changes on multiple screen sizes before finalizing.

FAQs

Can I resize the logo in the style editor without code?
You can adjust general logo sizing, but specific mobile-only tweaks require custom CSS.

Will this affect the desktop version?
No, the media query targets only screens 640px wide or smaller, leaving desktop styles unchanged.

---

---

Conclusion

With just a few lines of CSS, you can significantly improve the appearance of your site title and logo on mobile screens in Squarespace 7.1. Customizing your branding for smaller viewports ensures a cohesive design and a more professional experience for your mobile visitors.

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