Squarespace templates are designed to ensure visitors can easily navigate your site on any device they choose, from desktops to tablets to smartphones.
All Squarespace sites adjust on smaller browsers and fit the format of a device. We do this in two ways:
- Responsive design - Your content will automatically resize based on the size of the browser window viewing your site.
- Mobile styles - Most Squarespace templates have additional built-in mobile styles that activate when your site detects it’s being viewed on a mobile device. Mobile styles typically affect navigation and design elements to help keep your site mobile-friendly and cater to touch gestures.
Although the exact way your site appears on mobile varies by template, most templates have similar functionality. This guide outlines what you can expect from your mobile site and offers tips for adjusting your mobile styles.
Get to know your site on mobile
The best way to learn how your site works on mobile is to test it for yourself. There are two main methods for seeing your site’s mobile functionality: Device View, and testing it on mobile devices and smaller browsers. We recommend both.
Device View is a good way to test your site's responsive design from a desktop while you're editing. To open Device View, log into your site and hover over the page at the top of the browser. Click the arrow that appears, and select a device type. For detailed instructions, visit Device View.
Use your devices
Device View gives you a general idea of how your site appears on a typical mobile browser, but it's not 100% accurate for every phone or tablet. Window sizes vary between devices, and some templates' mobile features will look different on an actual mobile device than they do in Device View. So, it’s a good idea to visit your site on any device you can.
To visit your site from a mobile device, type your site's URL into your mobile browser's navigation bar. Your site doesn't have a different address for mobile devices.
Tip: During your trial, to preview your site as a mobile visitor, add a site-wide password (rather than using owner login).
SEO and keeping your site mobile-friendly
Google gives mobile-optimized sites a higher priority. Squarespace templates’ unique mobile styles mean that they are search-engine friendly and ready to be found in mobile searches. To learn more, visit SEO and Squarespace overview.
In addition to mobile-optimized templates, there are certain things you can do to ensure your site stays mobile friendly, including limiting the content in an Index Page, using blog excerpts, reducing image size, and minimizing the number of images on a page. To learn more, visit Keeping your Squarespace site mobile-friendly.
In general, content stacks vertically on mobile. This means that visitors can scroll to see all your content, rather than having to pinch, zoom, and scroll in many directions.
To learn about the mobile options for a particular template, visit our template guides.
The following information lists general rules for certain site elements on mobile.
Note: Some templates have mobile-specific style options. Since you can't edit your site on a mobile device, you can make these changes on a desktop computer. For help with this, visit Making style changes.
In most templates, the Announcement Bar appears at the top of the page on mobile.
Announcement Bars appear below the header overlay and above page content in these template families:
Audio and video files
Audio and video files open and play according to each device or browser's functionality. On some devices, including iOS, audio files open in your device's media player.
The same background image displays on desktop and mobile. As they adjust to the longer, narrower browser screen of a mobile device, background images may experience cropping or distortion. There are a couple things you can do to minimize cropping:
- When choosing a background image, the image shape can make a big difference in how it displays on mobile.
- See our troubleshooting tips for style settings that work well on mobile.
- When you add a background image, use a mobile device or Device View to see how it looks on mobile.
Banner images and parallax scrolling
Banner images will always experience some cropping on mobile devices. There are some things you can do to minimize cropping:
- Change your site's styles to edit the position of a banner, change the size, or set it to be fixed.
- Patterns work better than words, and landscapes work better than portraits.
- On page banner images, you can adjust the image's focal point to control how the image is cropped.
Parallax scrolling is a special effect available in certain templates where the background image appears to move more slowly than the content in the foreground. It's available on mobile in the Brine family.
Cover Pages adapt to mobile based on your layout. To learn more, visit Cover Page mobile styles.
Fonts typically maintain the same style on mobile, but large fonts, such as headings, may scale down to fit the browser width.
Some templates use scaling fonts so you can manually set the maximum and minimum sizes for titles, headings, and other key text.
Note: If you're seeing text overlap on mobile, change the font's line height.
Templates often have built-in mobile padding, which helps optimize your site for smaller browsers and responsive design. This means that spacing and padding tweaks that affect your desktop site may not always affect the appearance on mobile.
How your Gallery Page or Gallery Block displays on mobile depends on its format.
Tip: Large image files or too many images can cause your site to load slowly on mobile. To learn more, visit Keeping your Squarespace site mobile-friendly.
- Grid - Display as a grid, two columns wide.
- Slideshow - Remain as a slideshow.
- Carousel - Display as a carousel, but only show one image at a time.
- Stack - Remain stacked.
To learn more, visit Using Gallery Blocks.
Note: In most cases, image captions display the same way on mobile as on desktop. For Slideshow Gallery Blocks, captions don't display on browsers narrower than 480 pixels.
Many templates use the the standard Gallery Page. In these templates, on mobile:
- Grid - Gallery Pages stack vertically. Tap an image for lightbox view. In the lightbox, tap the dot in the bottom-right corner to display image titles and descriptions.
- Slideshow - Gallery Pages display as a slideshow. Tap to navigate. Image titles and descriptions don't display on browsers narrower than 480 pixels.
- If your template supports clickthrough URLs or deeplink URLs, they'll work on mobile as well.
Gallery Pages have unique properties on mobile in these template families:
- Avenue - Images stack vertically.
- Flatiron - Images stack beneath the page title and description text.
- Forte - Images stack vertically. Images titles and descriptions display below the image. Lightbox slideshow is disabled.
- Ishimoto - Images stack vertically.
- Momentum - Navigation arrows disappear after the first slide.
- Montauk - Images stack beneath the page description. Image titles and descriptions display below each image.
- Supply - Gallery Pages stack beneath the page title and description text. Images titles and descriptions display below the image.
- Tremont - Gallery images stack vertically on most smartphones. Larger smartphones and tablets will show the regular layout.
Instagram, Flickr, and 500px Blocks
Your navigation's mobile appearance depends on your template, but the Main Navigation typically collapses behind a menu icon (known as a "hamburger" icon) or link. If your template supports Footer Navigation, it displays at the bottom of the page, stacked vertically. For specific information about your template, visit Navigation menu icons.
Here's an example of how mobile navigation looks in the Supply template:
Page-specific headers and footers
For templates that support page headers or footers, the content will display on mobile.
Products Pages and eCommerce
Customers can shop on your site on mobile devices in much the same way they would on desktop. Like the rest of your site, your Squarespace store adapts to be small-screen friendly and navigable on mobile. Products stack vertically in one or two columns. On individual product item pages, the product image stacks above the description, price, and Add To Cart button.
Category navigation typically displays as a drop-down Filter menu. In Supply, the category navigation displays in the navigation menu.
The shopping cart appears after the customer has added at least one item. Tap the cart to go to checkout. In most templates, the cart appears in a black mobile bar at the bottom of the site.
Advanced and Unique Products Pages have special product features. Currently, Quick view and Product Image Zoom aren't available on mobile. In certain templates, you can adjust the mobile styling for your shopping cart.
Layout Pages and blocks
Blocks add content to Layout Pages and any editable areas like sidebars, footers, and blog posts. Squarespace's responsive design automatically stacks blocks vertically on mobile devices.
For more information and a video on how this works, visit Page and block layout changes on mobile devices.
- Single-columns - Full-width blocks stack vertically on mobile devices, retaining the page's desktop layout.
- Multiple columns - The second, third, and additional columns move below the first on mobile devices, stacking vertically instead of horizontally.
- Floated blocks display above their Text Block on mobile.
Spacer Blocks are automatically hidden on mobile for most templates.
If your site uses Promotional Pop-Ups, you can keep them enabled on mobile. All mobile pop-ups default to a standard, half-page style to help accommodate Google’s rules for ranking sites in search results.
- Gallery Pages - Mobile display depends on your template.
- Image Blocks and Gallery Blocks - Captions typically display the same way on mobile as they do on desktop. On-hover image captions may always display, display when tapped, or never display, depending on the type of mobile device and the browser width.
Sidebars display at the bottom of the page on mobile. In Ishimoto, sidebars don't display on mobile devices.
Site titles and logos
In general, your site title or logo will stay in a similar position on mobile. For example, if your site title displays in the top-right corner on desktop, it will typically display in the top-right corner on mobile.
For a breakdown of how each template’s site title displays on mobile, visit Adding a site title.
Favicon or browser icon
The favicon, or browser icon, display depends on your mobile browser. In some cases, the favicon won't display at all.
Template-specific mobile styles
For a list of all templates with mobile-specific options, visit Advanced mobile styles.
Disabling mobile styles
Mobile styles translate templates' features into a mobile-friendly interface catering to touch gestures, such as collapsible navigation menus and readable fonts.
Mobile styles are enabled by default, but you can disable mobile styles on most templates. To learn more, visit Disabling mobile styles.
Note: Responsive design is built into every Squarespace site and can’t be disabled.
Your site's built-in and custom domains work on both desktop and mobile; you don't need a separate mobile URL.
Note: If you're having issues with a third-party domain connecting on mobile, ensure you've correctly linked it to your site.
In general, mobile devices support lightbox effects, but there are some limitations:
- Pinch-to-zoom isn't supported.
- Lightboxes are disabled on the Wexley template's Gallery Page.
- If your image has a caption, a white dot appears in the bottom right of the lightbox. Tap the dot to show the caption.
Touchscreen devices, such as smartphones, tablets, and touchscreen laptops, don't support hovering. For elements on your site that have hover effects, the effects may display when tapped. For example:
- Drop-down folder menus display when tapped.
- Product item names and prices display below the image.
- Image captions may always display, display when tapped, or never display, depending on the type of device and the browser width.
What's the difference between responsive design and mobile styles?
Responsive design automatically scales your site content for the best display based on current screen resolution and size. All Squarespace sites are built with a responsive design.
Mobile styles are style rules built into each template that reorganize how a site's content is viewed on mobile devices. These styles create an optimal display for sites on smaller screens. A website with mobile styles will look different than a website viewed on a desktop browser.
How does Squarespace decide when to display mobile or desktop styles?
When you visit a site on a mobile device, Squarespace will automatically detect a mobile operating system. This sends a signal to display the mobile styles. The exception to this is if you disabled mobile styles in the settings.
Can I add custom CSS to change the mobile layout of my site?
Yes, this is possible with custom code, but this is an advanced modification. We're unable to offer help with this setup or any third-party code modification or addition. We recommend visiting our community forum, answers.squarespace.com, for code-based questions. For more information on adding custom CSS, visit Using the CSS Editor.
Can I edit my site on mobile?
You can log in and manage some aspects of your Squarespace site on your mobile device, but some features are only available on a desktop or laptop.
You can also manage certain aspects of your site on mobile using our mobile apps.