Learn how various site elements look for mobile visitors.

Squarespace sites are designed to ensure visitors can navigate your site on any device they choose, from computers to tablets to smartphones.

This guide explains how certain site elements appear on mobile and offers tips for changing your mobile styles.

Watch a video

Keeping your site mobile-friendly

All Squarespace sites adjust on smaller browsers to fit the format of a device. We do this with responsive design, where your content automatically resizes based on the size of the browser window viewing your site. In general, content stacks vertically on mobile. This means that visitors can scroll to reveal all your content, rather than having to pinch, zoom, and scroll in many directions.

If your site is on Squarespace version 7.0, your template may have extra built-in mobile styles that activate when your site detects it’s being viewed on a mobile device. To learn more, visit the Version 7.0 mobile styles section below.

On version 7.1, sites adapt to mobile views automatically, but some areas, such as Fluid Engine sections or headers, have mobile-specific options.

SEO for mobile

Google gives mobile-optimized sites a higher priority. Squarespace sites' unique mobile styles mean that they are search-engine-friendly and ready to be found in mobile searches. To learn more, visit What Squarespace does for SEO.

In addition to mobile-optimized designs, there are certain things you can do to ensure your site stays mobile friendly, including limiting the content in a portfolio or index page, using blog excerpts, reducing image size, and minimizing the number of images on a page. To learn more, visit Tips for keeping your site mobile-friendly.

Get to know your site on mobile

The best way to learn how your site works on mobile is to test it for yourself. We recommend using the built-in device view and testing on a mobile device.

Device view

The device view tool shows the different mobile views of your site. This is a good way to test your site's responsive design from a computer while you're editing. For detailed instructions, visit device view. In areas that use Fluid Engine, use device view to edit your mobile layout independently from your computer layout.

Use your devices

Window sizes vary between devices, and some mobile features will look different on an actual mobile device than they do in device view, so it’s helpful 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.

Tip: During your trial, to preview your site as a mobile visitor, add a site-wide password (rather than using owner login).

Audio and video

Audio files and videos open and play according to each device or browser's abilities. On some devices, including iOS, audio files open in the device's media player.

Videos play on the page in all our supported browsers for mobile. If you've added a custom thumbnail as an image overlay, tap twice to play the video. Learn how video banners work on mobile in the next section.

Blocks

Blocks add content to sections, pages, and other editable areas, like blog posts. How blocks appear on mobile depends on your site's version and where the blocks are added.

In areas of version 7.1 sites that use Fluid Engine, arrange your mobile layout independently of your computer layout.

In version 7.0 sites and areas of version 7.1 sites that use the classic editor, Squarespace's responsive design automatically stacks blocks vertically on mobile devices. To learn more, and to watch a video on how this works, visit How blocks stack on mobile in the classic editor.

• Single-columns - Full-width blocks stack vertically on mobile devices, preserving the page's computer 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, except in some templates on version 7.0.

Domains

Your site's built-in and custom domains work on both computers and mobile. You don't need a separate mobile URL.

If you're having issues with a third-party domain connecting on mobile, ensure you've correctly linked it to your site.

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.

Galleries

How your gallery displays on mobile depends on your site's version and the gallery format.

Tip: Large image files or too many images can cause your site to load slowly on mobile. To learn more, visit Tips for keeping your site mobile-friendly.

Gallery blocks

In Fluid Engine, gallery blocks display the same on mobile as on a computer, but you can change their size and placement. In the classic editor, how gallery blocks display on mobile depends on their layout:

• 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

Usually, image captions display the same way on mobile as on a computer. For slideshow gallery blocks, captions don't display on browsers narrower than 480 pixels.

To learn more, visit Gallery blocks.

Header elements

Your announcement bar, navigation menus, and site title and logo may shift on mobile.

Announcement bar

The announcement bar appears at the top of the page on mobile.

In these version 7.0 template families, the announcement bar appears below the header overlay and above page content:

• Brine
• York

Navigation menus

How your navigation menu appears depends on your site's version.

To learn more, visit Styling navigation.

Site titles and logos

The way that your site title or logo appears depends on your site's version.

Images

To account for the narrow width of mobile devices, some images and image features change on mobile.

Banner and section background images

Banners and section background images always experience some cropping on mobile devices. Cropping happens because banner images and videos are wide and horizontal, while mobile device screens are narrow and vertical.

Follow our banner image formatting tips and responsive design image best practices before uploading images. When viewing your site on mobile devices, keep in mind:

• The amount of cropping depends on the height of the banner and the width of the browser.
• Banner height settings don't always apply to mobile.
• Video banners won't load on mobile if the connection speed is slow or if the browser doesn't allow it. Set a mobile fallback image to appear when the video can't load.
• For site-wide banners, the Fix position setting won't appear on some mobile devices, including iOS. To learn more, visit Adding site-wide background images in version 7.0.

To minimize the effects of cropping for your banner images, visit Troubleshooting cropping issues.

Image captions

The types of captions that your site uses depend on your site's version.

Instagram and Flickr blocks

Blocks that display images from social accounts, like Instagram and Flickr, display images in a grid, two columns wide.

Lightboxes

In general, mobile devices support lightbox effects, but there are some limitations:

• Pinch-to-zoom isn't supported.
• If your image has a caption that appears on hover, a white dot appears in the bottom-right of the lightbox. Tap the dot to show the caption.
• On version 7.0, lightboxes are disabled on Wexley gallery pages.

Page elements

Hover effects and padding change on mobile to keep your site mobile-friendly.

Hover effects

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 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.
• Portfolio sub-page titles and featured images may never display. 

Padding

Squarespace sites 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 site on a computer may not always affect its appearance on mobile.

Promotional pop-ups

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.

Use the Style panel to customize the mobile design, or disable mobile pop-ups in the Display & timing panel.

Store pages and commerce

Customers can shop on your site on mobile devices in much the same way they would on a computer. Like the rest of your site, your Squarespace store adapts to be small-screen friendly and navigable on mobile. Products stack vertically. On individual product details pages, the product image stacks above the description, price, and Add to cart button.

Other styles depend on your site's version.

Text and fonts

Fonts typically maintain the same style on mobile, but large fonts, such as headings, may scale down to fit the browser width. If text is overlapping on mobile, change the font's line height.

Phone numbers added to your site's body or footer text display as links on the Safari mobile browser.

Some version 7.0 templates use scaling fonts so you can manually set the maximum and minimum sizes for titles, headings, and other key text.

Version 7.0 mobile styles

Watch a video

These features are unique to version 7.0 sites:

• Cover pages - Cover pages adapt to mobile based on their layout.
• Page-specific headers and footers - For templates that support page headers or footers, the content displays on mobile.
• Parallax scrolling - 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.
• Sidebars - Sidebars display at the bottom of the page on mobile. In the Ishimoto template, sidebars don't display on mobile devices.
• Site-wide background images - Site-wide background images are supported on mobile. You may need to make the content area transparent for the background image to appear.

Template-specific styles

To learn about the mobile options for a particular template, visit our template guides.

For a list of all templates with mobile-specific options, visit Advanced mobile styles.

Disable mobile styles

Most Squarespace templates have a unique design optimized for mobile devices, which helps your visitors view and navigate your site from any device. Some templates have an option to disable this feature if you prefer, though we recommend keeping the mobile styles enabled.

Keep in mind:

• Disabling mobile styles makes your site appear the same on a mobile device as it does on a computer. Instead of site content stacking into one vertical column, blocks and other content appear in the same layout as on a computer browser.
• Disabling mobile styles might affect your SEO. In April 2015, Google began considering “mobile-friendliness” when ranking sites on mobile device searches. Squarespace sites are only compliant with Google’s requirements when mobile styles are enabled.
• Disabling mobile styles disables the mobile navigation.
• It's not possible to disable mobile styles for cover pages.

To disable mobile styles:

1. Open the Design panel, then click Template settings.
2. Check Disable mobile styles.
3. Click Save.

This option won't appear if your template doesn't support disabling mobile styles. Mobile styles can't be disabled in these template families:

• Brine
• Farro
• Galapagos
• Skye
• Supply
• Tremont
• York

FAQ

How does Squarespace decide when to display mobile or computer styles?

When you visit a site on a mobile device, Squarespace automatically detects a mobile operating system. This sends a signal to display the mobile styles, unless your site is on version 7.0 and you've disabled them.

Can I edit my site on mobile?

You can edit your site on mobile using the Squarespace app for iOS or Android.

You can also log in through your mobile browser and manage some aspects of your Squarespace site on a mobile device, but some features are only available on a computer.

What's the difference between mobile styles and responsive design?

Mobile styles on version 7.0 and responsive design are different, but related, concepts.

• Mobile styles are unique to version 7.0 templates. These styles only affect mobile-specific navigation, restrictions placed on loading content backgrounds, and other design elements that might be unwieldy on mobile devices. These elements are disabled when you disable mobile styles to present a more computer-like version of your site.
• Responsive design refers to the ability of your site and its content elements to change their size to fit the visitor's browser window. Responsive design remains in place for all Squarespace sites even with 7.0 mobile styles disabled. This means that the full website is still sized to fit smaller devices, but if mobile styles are disabled, the content won't rearrange for easier navigation. Mobile styles can't be disabled on version 7.1, so content always rearranges and resizes. To learn more, visit Responsive design.

Can I add custom CSS to change the mobile layout of my site?

Yes, but custom code modifications fall outside the scope of our support. This means that we’re unable to help further with setup or troubleshooting. Additionally, with a code-based solution, we can’t guarantee its functionality or full compatibility with Squarespace. This includes how it functions with our responsive design, particularly its appearance on mobile devices, and if it functions on all templates. Custom code can also cause display issues with future updates to our platform. While we can't help further, there are many resources that can point you in the right direction:

• Learn best practices for adding custom code.
• Read our general guide on third-party customizations.
• Visit the Squarespace Forum, our customer and developer community.
• Hire a Squarespace Expert to help build custom code for your site. Learn more about the expert services available through Squarespace Marketplace.