Are You Missing Your Logo on Mobile View in Squarespace? This is an often reported issue but can easily be fixed with some effort.
Before uploading an SVG file, verify its size is appropriate. The maximum size allowed varies with each family template in Squarespace but generally speaking 320px can be set as your maximum value in Site Styles.
1. Check the Size
At first, it’s essential that you examine the size of your Squarespace logo. Once uploaded to Squarespace, its software will resize it automatically for both desktop and mobile versions of your site; as a result, using an image with high-quality, large dimensions is recommended as smaller images may become blurry when scaled down to fit banners, headers or other containers.
Prior to uploading your logo, it’s crucial that it is of high-quality image format. This will prevent it from becoming pixelated or blurry when resized for various devices; an ideal logo size should range between 1500-2500 pixels wide for optimal results.
Make sure that your logo is the appropriate size by saving it as a PNG file, which allows for lossless image compression without degrading its quality. This allows your Squarespace logo to grow as large or as small without losing quality.
Consider keeping your logo wide so it can easily resize for mobile devices, especially given most Squarespace themes‘ narrow headers – these may lend themselves better to accommodating an aesthetically pleasing wide logo format than a vertical one.
To customize the size of your Squarespace logo, navigate to your site preview screen and navigate to the design menu on the far left, clicking LOGO & TITLE. From here you can adjust both desktop and mobile device height of the logo height sliders accordingly.
If you’re using the Squarespace App, this setting can also be found by hovering over any page’s logo and selecting “Edit.” 7.1 and later users can also access this by opening their home menu, tapping Settings, then Logo & Title.
If you’re having difficulty with resizing your Squarespace logo, adding some custom CSS may help solve your dilemma. It will ensure that it fits comfortably across both desktop and mobile devices and browsers.
2. Check the Alignment
Squarespace 7.1 users who have built sites prior to its release can take a specific approach for optimizing mobile view, by altering some built-in template settings. This tip involves changing some template settings that come standard.
To access your mobile menu style settings, you can click the horizontal line above your site window and then choose from one of three device-view options available – Mobile, Tablet or Desktop. After choosing Mobile as the device view option, three built-in menu style settings will become visible:
This video tutorial will demonstrate how to utilize these settings to adapt your site logo when it appears in mobile view. This is an ideal solution for anyone with a Squarespace website who requires more efficient navigation menus when browsing from mobile.
One of the easiest ways to customize how something appears on mobile is by adding a spacer block. This type of element allows you to add extra whitespace above, below, or beside any type of content on your page; additionally it’s ideal for providing distance between different forms of media.
Spacer blocks don’t require precise placement and are therefore an ideal way to create breathing room in your content. To create one that will counter another block, place two identical ones side-by-side.
An internal/external spacer block link is especially helpful if your website includes multiple domains and you need a personalized landing page for each one.
To create a link between an external domain and one on your page, enter its URL into the “Link” field in your spacer. After doing this, choose “Link” in the drop-down menu and then “Page Names from Available Pages.”
3. Check the Position
If your logo appears centered in desktop view but dissappears completely when seen from mobile, this could be due to it not being tall enough. Squarespace sets a default maximum size limit of 320 pixels for logos (although actual height will differ depending on template); with some custom CSS you could increase this figure up to an ideal size.
To change the height of your Squarespace logo, log into your admin panel and navigate to Design > Site Styles. To access device-view options and the mobile option, click the three horizontal line icon in the upper right corner and then choose mobile option. Here, you can either change maximum logo height or link directly to download file which will load at smaller size.
Note that any change you make to the Site Styles will affect both desktop and mobile views of your website, so it is wise to test any modifications prior to making them live on your website in order to make sure they work for you and look great. Keep in mind that Squarespace frequently releases new features, meaning something that worked yesterday may no longer function correctly when refreshing the page later on.
Squarespace version 7.0 and older websites (and some templates in version 7.1 family) come equipped with built-in mobile styles that you can enable, so it is worth verifying whether these have been activated. For more information, check out this Squarespace video or this tutorial.
Fixed navigation bars make it easy for visitors to remain on your website while scrolling long pages, and may also be more visually appealing than drop-down menus. Furthermore, they’re easy to implement using just a small bit of code from any page on your site.
To include the navigation bar on all pages, edit your template’s code by including this line:
4. Check the Class or ID
If your Squarespace logo seems to disappear when viewed on mobile view, the issue could lie with its class or ID of the image block holding your logo. While Squarespace provides tools to adjust font sizes on mobile devices, sometimes making small adjustments to custom CSS can get your logo looking just right on mobile.
One way of checking the class or ID of a block is through using your web browser’s built-in developer tools. With these, it is simple to view CSS selectors for any element on your site and debug and troubleshoot issues – you’ll find them by clicking on the cog icon in the top-right corner.
This tool is easy and effective way to quickly identify what your section or image block’s class or ID is. Just launch Chrome browser, click “Find Squarespace IDs” extension, and copy/paste all section and image block ID’s from this window into another one for copying and pasting them directly onto the web site.
Use this tool to identify any external pages linked to in your website, making it a quick and effective way to ensure all links are working or that an extra character hasn’t been accidentally left in the code of your page.
When your Squarespace website is running slowly or you need to identify errors on it quickly and efficiently, using these tools is an invaluable asset in finding and fixing the source of its issues quickly. With them by your side, your site should soon be operating like clockwork again!
