Note: While our most popular guides have been translated into Spanish, some guides are only available in English.

How will my site appear on mobile devices?

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

All Squarespace sites adjust on smaller browsers and 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 see 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, see the Version 7.0 mobile styles section below

On version 7.1, sites adapt to mobile view automatically, but some areas, such as headers, have mobile-specific style options.

This guide explains how certain site elements appear on mobile and offers tips for changing 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. 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 desktop while you're editing. For detailed instructions, visit Device View.

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).

SEO and keeping your site mobile-friendly

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.

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

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 the device's media player.

Video files 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.

Banner images

Banner images will always experience some cropping on mobile devices. To minimize the effects of cropping:

  • Change your site's styles to edit the position or size of a banner.
  • Abstract patterns and images without text or borders work best.
  • On most banner images, you can adjust the focal point to control where the image is centered.

Blocks

Blocks add content to sections, pages, and other editable areas, like 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, except in some templates on version 7.0.

Domains

Your site's built-in and custom domains work on both desktop 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 sections

How gallery sections display on mobile depends on the layout: 

  • Grid: Simple - Display as a grid. Sections set to one column display in one column. Sections set to two or more columns display in two columns. 
  • Grid: Strips - Display stacked in one column.
  • Grid: Masonry - Sections set to one column display in one column. Sections set to two or more columns display in two columns. 
  • All Slideshow layouts - Remain as a slideshow.

Captions don't display in lightbox view. 

Gallery Pages

Many templates use 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 show the regular layout

Gallery Blocks

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

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.

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 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.

Image captions

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

  • Gallery sections - Captions typically display the same way on mobile as they do on desktop, except that captions don't display in the Slideshow: Simple layout.
  • 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.
  • 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.
  • Gallery Pages - Mobile display depends on your template.

Instagram, Flickr, and 500px Blocks

Blocks that display images from social accounts, like Instagram, Flickr, and 500px, 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.

Navigation menus

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

Your navigation's mobile appearance depends on your site's header layout. The Main Navigation always collapses behind a menu icon, but you can set the navigation layout, type of icon, and overlay color in the header settings.

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. 

To learn more, visit Styling navigation.

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 the 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.

Site titles and logos

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

The style of your site title or logo depends on the layout of your site header. In the header editor, click the Mobile icon to change the layout. 

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 Site title and logo display.

Store Pages and Commerce

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 details pages, the product image stacks above the description, price, and Add To Cart button.

Other styles depend on your site's version

  • Multiple product images display in a slideshow that shoppers can swipe through.
  • Category navigation displays horizontally for shoppers to swipe through.
  • When the shopping cart is enabled in header settings, it always appears at the top of the page. If you disable the shopping cart icon, it only appears at the bottom of the page when someone adds a product to their cart.
  • Currently, Quick View and Product Image Zoom aren't available on mobile.
  • Multiple product images display in small thumbnails or stacked on product details pages. 
  • Category navigation typically displays as a drop-down Filter menu. In Supply, it displays in the navigation menu. 
  • The shopping cart appears after the customer has added at least one item. In most templates, it appears in a black mobile bar at the bottom of the site.
  • Currently, Quick View and Product Image Zoom aren't available on mobile. 
  • Advanced and Unique Store Pages have special product features. In some templates, you can change the mobile styling for your shopping cart.

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 you're seeing text overlap 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

These features are unique to version 7.0 sites:

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 desktop. Instead of site content stacking into one vertical column, blocks and other content appear in the same layout you see on a desktop 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. In the Home Menu, click Design, 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 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, 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 desktop-like version of your site.
  • Responsive Design refers to the ability of your site and its content elements to adjust 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 will still be 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 will always rearrange and resize. 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:

Was this article helpful?
46 out of 125 found this helpful