How to Resize Logo in Squarespace Without Changing the Header Size
One of the most crucial features when creating a website using Squarespace 7.1 is the logo. You want readers to be able to see the logo, but it's a fine line, from making the logo too obvious, and stretching out its length without adjusting the rest of the header dimensions and alignment.
And in this guide, we’ll teach you how to resize your logo to keep your header size looking good on both desktop and tablet/mobile.
Why do You Resize Your Logo Size without Changing the Header?
Why is it important to resize the logo?
Brand issue: Your logo should integrate smoothly with your site’s design and not need to clutter up the header space.
Responsive Design: A smaller logo that still works well on desktop and mobile.
User Experience: A correctly sized logo. Your website will look ready and put together.
By resizing the logo with CSS, you are able to keep the design looking great at all resolutions without changing your header design.
Step-by-Step: How to Resize Your Logo Without Changing the Header Size
Step 1: Inspect Your Logo Element
In most cases, Squarespace uses specific classes for the logo in the header. Here’s how to inspect and identify the logo element:
Open your website on Google Chrome or Safari.
Right-click on your logo and select Inspect (or Inspect Element).
Find the logo class in the HTML. It might look something like this:
.site-logo
.header-logo
.header-title-logo
This is the element we’ll modify using CSS.
Step 2: Add Custom CSS to Resize the Logo
Once you’ve identified the logo element, you can resize it using CSS.
Go to Design → Custom CSS in your Squarespace dashboard.
Paste the following code to resize your logo:
/* Resize the logo in the header */
.header-title-logo img {
max-height: 110px !important; /* Set the maximum height */
height: auto; /* Keep the aspect ratio intact */
display: block; /* Remove inline spacing */
margin: 0 auto; /* Center the logo horizontally */
}
/* Optional: Adjust the padding of the header */
.header-title {
padding: 0; /* Adjust padding to prevent extra space */
}
/* Resize logo for mobile */
@media (max-width: 767px) {
.header-title-logo img {
max-height: 80px !important; /* Adjust size for mobile */
}
}
Explanation:
max-height: 110px;: Sets the maximum height of the logo. Adjust the value based on your design.
height: auto;: Ensures the logo maintains its aspect ratio.
margin: 0 auto;: Centers the logo horizontally in the header.
padding: 0;: Removes unnecessary padding from the header.
Step 3: Adjust Header Padding or Spacing (Optional)
If you find that the header is still too large after resizing the logo, you can fine-tune the padding of the header:
/* Adjust header height if needed */
.header-wrapper {
padding: 10px 20px; /* Modify padding to fit your design */
}
Optional: Make the Logo Resize Dynamically for Mobile
To ensure your logo resizes automatically on smaller screens, like mobile devices, you can add a media query for smaller screen sizes:
/* Resize logo for mobile */
@media (max-width: 767px) {
.header-title-logo img {
max-height: 80px !important; /* Adjust logo size for mobile */
}
}
Final Result
| Device | What Happens |
|---|---|
| Desktop | The logo will resize to your desired width and height. |
| Mobile | The logo will dynamically resize to fit the smaller screen size. |
| Header | The header size remains the same, with no extra padding or spacing. |
Final Thoughts
Resizing your logo in Squarespace 7.1 without altering the header size is a quick and effective way to enhance your site’s appearance and maintain a clean, professional look. With just a few lines of CSS, you can ensure that your logo looks great on all devices — without affecting the overall layout of your header.
Frequently Asked Questions
-
It's not uncommon for Squarespace to associate logo size with the size of the header container. In most cases, resizing the logo will scale the header down or up. Using custom CSS would then also allow you to make just the logo bigger, without changing the height of the header.
-
Yes. Using a responsive rule, you can set a max height as bigger for desktop and smaller for mobile. This means your logo will look well-proportioned on all platforms without having to upload different versions.
-
Unless it’s high-resolution, at which point you’ve failed at saving a small file. Always have a well-optimized PNG or SVG (for simpler graphics) so it stays crisp at small and large resolutions.
-
That’s almost always because of default padding or margins in the header. You're able to set the padding on the header as well, reducing the empty gap but allowing the logo to be scaled okay.
-
Squarespace control panel offers only some changes to the size of your logo, but in fact, the size of the entire header will be changed. For fine control—such as you want to maintain the header yet replace the logo—using a bit of extra CSS is the best way to go.
