Squarespace was specifically created to look good on mobile devices right out of the box; however, adding additional elements can alter how things appear on mobile.
For instance, if you create an attractive zig-zag layout on desktop, the blocks may stack differently on mobile and this can be rather irritating!
Change the Breakpoint
Squarespace 7.1 or later makes editing your mobile view simple with Site Styles panel’s Mobile view icon; simply click it to access the mobile view of a page or blog post and edit fonts, colors, animations and spacing to customize for mobile viewers. Any changes made here will also affect desktop versions; for targeted adjustments for just the mobile version use Custom CSS Media Queries instead.
Text overlapping on mobile can also be an issue, making pages with lots of content hard to read. Luckily, there are a number of simple solutions to address this issue.
Like with any responsive design, it’s essential that your mobile layout be regularly reviewed in order to catch any potential problems before your visitors start complaining. If text overlapping occurs or other problems arise, don’t hesitate to reach out – Squarespace Support team are on hand 24/7 if any arise.
Here, you will be able to locate their contact details.
Although Squarespace does an exceptional job of automatically adapting your site for different screen sizes, it remains your responsibility to carefully inspect mobile designs to make sure they match up with your vision for your site. This is particularly important if you have added large media files, lots of content or tight letter spacing.
One strategy to save time when adding Blocks to a section is planning out your desktop layout first, to ensure all elements fit seamlessly in both versions of your mobile website. Furthermore, reviewing it every time something new is added should help avoid unnecessary adjustments later.
If you need to add spacer blocks, keep in mind that they will be hidden on mobile. While this might look neat and tidy on desktop, it can cause problems on mobile. Instead, try increasing padding on elements to create more whitespace; this will enable your users to navigate your site easily from their phones.
Rearrange the Blocks
As more users access the web from mobile devices, it is increasingly important to ensure your website looks great regardless of screen size. Squarespace makes this task easy with their independent mobile editor; additionally they offer various settings so your website will look fantastic while fitting seamlessly with your brand identity.
Squarespace alerts you, whenever changes to a section that affects the mobile layout, are being made by placing a blue dot on the mobile icon in the top right. This allows you to keep an eye on all edits as you work.
While the older Classic Editor automatically converted existing desktop designs for mobile, Fluid Engine editor gives you more freedom and flexibility in designing for mobile. This means more freedom when designing for mobile!
As you assemble your page or sections with Blocks, you can drag them around to rearrange their positions. Additionally, keyboard arrows provide a convenient way of making small adjustments in spacing by nudging blocks up or down one row at a time.
Setting margins between blocks can also be extremely useful, and can create an aesthetic grid without needing to change each individual block’s pixel size manually.
If you are using columns, it is important to remember that Squarespace stacks them atop each other for mobile. While this works fine in most situations, if you’re creating multi-column grids and would rather your content appear side-by-side for mobile instead of being stacked atop each other on mobile, additional steps will need to be taken in order for mobile views.
When dealing with large blocks of text, it’s essential that the appropriate font color and formatting for mobile is set. This is particularly crucial if different font colors exist for headers and paragraphs. Although you can set global design styles through Site Styles tab, changing only formatting in an individual text block may require more work.
Add Custom CSS
Text blocks or image galleries can quickly overwhelm mobile visitors to your website, leaving legibility compromised. While Squarespace will adjust font sizes accordingly for legibility purposes, sometimes you want to adjust specific text or gallery items individually to look different than their counterparts – that’s where custom CSS comes in handy; simply add a code snippet into Design > Custom CSS in your website in order to increase or decrease font sizes on mobile only.
One issue that may arise when using multiple spacer blocks at once is when they all cancel out on mobile, leaving an abundance of negative space. This may also happen if your section height is set higher than default and an image block resides directly underneath it; either way, some experimentation with spacer blocks and Section Height settings should provide an immediate solution to this one.
Sometimes background section images don’t display as intended on mobile or are cropped so the most important parts of them don’t show. To fix this, repositioning their focal point within banner editor may help.
Mobile users also have the ability to extend images and other block types past the grid in order to make them flush with the edges of your page. This can create an interesting effect with some designs, particularly those incorporating large graphic elements that you want to push to the edges of their screens.
One last tip on mobile layout: always do a live preview on your phone or tablet before publishing your site, to get an idea of how it looks on mobile and identify any issues that you might not see with Device View alone. A quick way to do a live preview is clicking the mobile icon in your top toolbar when editing your site – no matter if editing or publishing!
Add a Mobile Menu
Squarespace already does a decent job of optimizing sites for mobile devices, but you can always do more. For instance, changes can be made to the mobile layout through custom CSS or by using Squarespace’s Mobile Editor – which makes editing mobile views of sites simple even for novices.
One of the easiest and most efficient ways to alter a mobile layout of a website is by adding in a mobile menu. This provides users with a user-friendly navigation experience on mobile devices.
Squarespace provides the default mobile menu as a hamburger icon which, when clicked, opens up a navigation menu. Although this works for most websites, certain businesses might prefer something else such as adding search buttons instead of icons to their mobile menus.
There are multiple methods available for adding mobile menus to a Squarespace website, but one of the simplest options would likely be through Custom CSS. To do this, create a new line in your Custom CSS editor and insert this code below into a textbox.
Here, you are specifying that your code only apply to mobile views of the page, and should follow any existing mobile styles. Afterward, specifying a section ID of the page for editing before setting a style that should apply is also part of this process.
This code will reverse the content within a section on mobile devices and add a box shadow effect for added visual interest. Feel free to experiment with various parameters within this code until you find what works for you!
Before this feature was implemented, changing the color of a mobile menu on Squarespace was sometimes difficult due to spacer blocks being used to add empty space between pages; while this looks beautiful on desktop screens, mobile users could experience problems when content overlapped with this whitespace created by spacer blocks. Now however, this issue has been solved in Squarespace and changing mobile menu colors is as straightforward as changing any element’s background color.
