Responsive design

Learn how Squarespace shifts your site’s content to fit any device.

Last updated December 16, 2024

Squarespace's built-in responsive design resizes your content and images to fit different devices and screen widths. With responsive design, visitors can automatically view your site in many ways, so you don't need to create and maintain separate sites for every potential device, browser, and display width.

The answer to common questions like “Why is my banner cropping on mobile?” or “My background image is distorted. How do I fix it?” lies in understanding responsive design, and choosing images that can adapt to the shape of different browsers and devices.

Tip

To learn more about how certain site elements appear on mobile, visit How will my site appear on mobile devices?

sizes.gif

Image best practices

Imagine a narrow rug that fits perfectly on the floor of a narrow room. If you move the rug into a smaller room, or even turn it sideways, it won't fit properly.

Images, especially banner and background images, work the same way. Responsive design helps your "rug" change size and shape. For the best effect, select and set up each image so it looks good in as many "rooms" as possible.

When choosing an image to upload, keep in mind:

Image size

  • For recommendations about image file size and width, follow our image best practices.
  • To learn about best practices for banner images, visit Adding banner images.
  • Choose images with roughly the same shape as the container where they appear. For example, use a wide image for a banner. To understand how cropping works, visit Troubleshooting cropping issues.

Image content

  • Abstract patterns and images without text or borders work best.
  • For background images, repeating patterns give the greatest flexibility.
  • Change the focal point to control how the image centers.
  • If it's important that a specific area of the image (like a person or object) isn't cropped, it can help to add a "bleed" area around the edges, so that cropping is less noticeable.
bleed-areas.png

Text best practices

Text resizes automatically to fit the screen.

Tips:

  • Add text as a caption, overlay, or directly on the page, rather than using images that contain text. This will reduce cropping issues as fonts scale with the browser width. Search engines can also index it for results.
  • Some version 7.0 templates offer fine-tuned control over how text resizes on mobile devices.

Content rearranges on mobile

In Fluid Engine, you can rearrange your content for your mobile layout independently from the computer layout.

In the classic editor, content stacks vertically in mobile devices. This makes your site easier to navigate and helps images and text stay visible in a smaller, narrower browser.

To learn more:

Note

If your site is on version 7.0 and you've disabled mobile styles, your site content won't rearrange or stack on mobile.

Content responds differently on Retina screens

Your site's appearance on Retina and HD screens depends on the original size of the images you uploaded to your site.

When you upload an image, we store up to seven versions of it, each with a different width. Our built-in responsive design automatically detects the visitor's screen and picks the best image size to fit it. On Retina screens, we'll show an image twice as large as needed.

Note

Images loaded through site styles on version 7.0, such as background images, are the exception to this rule. For these images, we always show the original image at its full size.

Here are some other image types to consider:

  • Logos: Uploading a large image file (twice the size needed) for your logo can improve its appearance on HD and Retina screens. However, this may cause blurring on other screens and some browsers. Consider your site's audience and use a logo size suitable for the majority of your visitors' screens. You can change the logo's height in most templates.
  • Icons: Most icons in our templates, like menu icons and social icons, scale without a loss of image quality because they're web font or SVG-based. Some older or discontinued templates have image-based icons that don't scale on Retina displays.
  • Text: Any text added to your site will scale for Retina screens without a loss of quality.

For more tips on optimizing images, visit Formatting your images for display on the web.

Compare on different devices

Comparing your site on mobile versus a computer is a good way to test how your site adapts to different browser shapes. As you make major changes on your site, it's a good idea to keep your phone close by, with your site open in its browser. When you save big changes on a computer, refresh the browser on your smartphone to check the effect.

Testing changes on your mobile device gives the most accurate display and is the only way to explore portrait and landscape orientations. For a quick preview as you’re editing on a computer, use device view.

To learn more about how your browser window size may impact the formatting of your site content, visit Supported browsers.

Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.