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?
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 just 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:
- 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.
- 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.
Text best practices
Text resizes automatically to fit the screen.
- 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 templates offer fine-tuned control over how text resizes on mobile devices.
Content rearranges on mobile
In general, content stacks vertically on mobile. This makes your site easier to navigate and helps images and text stay visible in a smaller, narrower browser.
To learn more:
- See our general rules for how your site looks on a mobile device.
- Learn how pages and block layouts change on mobile.
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, such as Internet Explorer. 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, social icons, and Share buttons, 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 desktop is a good way to see 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 desktop computer, refresh the browser on your smartphone to see 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 desktop, use Device View.