Edit the Site Title and Logo for Mobile in Squarespace 7.1
Are you having trouble adjusting the logo or site title size on your Squarespace website?
Squarespace 7.1 offers a few different options for tweaking the site title and logo, but sometimes the default editing options aren’t enough to give you the level of customization you want. That’s where a little CSS comes in handy!
In this video, I show you three different ways to customize your Squarespace logo or site title:
Adjust the logo size in the Squarespace editor
Edit the site title size and font style
Customize the mobile site title or logo with CSS
All the code used in this video is provided further down the page in the written tutorials.
How to adjust the logo size in the Squarespace editor
To adjust your Squarespace logo in the desktop editor, simply open the home page. Hover over the header, then click the “Edit Site Header” button.
Immediately you will see where to edit the site title and logo. First, you will need to upload a logo from your computer. Then you will have access to a slider where you can downsize or upsize your Squarespace logo until you achieve the size you prefer. There are separate sliders to adjust the logo size for both desktop and mobile viewing.
However, if you do not have a logo, there is no option to adjust the site title size. For that, you’ll need to edit the settings in a completely different area of your Squarespace website!
How to edit the site title font & size
If you’ve been wondering how to edit your site title, you’re not alone. That’s because the site title customization options are hidden under font styles.
To resize your site title, go back to your main website dashboard and click “Design.” Then click on “Site Styles,” and you will see that “Fonts” is at the top of the list.
When you open up Fonts, you’ll be able to customize your site title for both desktop and mobile.
How to customize the mobile site title or logo with CSS
Lastly, you can use the CSS provided below to completely customize your mobile site title or logo size for Squarespace. I actually use CSS quite a bit to edit my websites for mobile view, because Squarespace doesn’t always resize pages perfectly. You can watch my video on editing your Squarespace website for mobile to learn more!
With CSS you can directly change the mobile site title font size in REM, or adjust the mobile logo height in pixels.
CSS to Edit the Site Title:
@media screen and (max-width:640px) { #site-title { font-size: 1.2rem; } }
CSS to Edit the Logo:
@media screen and (max-width:640px) { .header-title-logo img { max-height: 60px; } }
Squarespace logo vs site title
You may be wondering which is better for your website, a site title or a logo?
The choice is entirely yours! Choosing one or the other will not impact your Squarespace SEO.
Contrary to popular opinion, you do not need a logo to make your website look professional. For example, I prefer to use a site title with my name instead of using a logo for my Squarespace website.
However, depending on what type of business your website is for, having a logo may be a better choice for branding purposes. Whichever option you end up choosing, you can always come back later and edit your header if you change your mind.
