Cover page mobile styles in version 7.0

Last updated August 22, 2024

Preview how your version 7.0 cover page will look on mobile.

To ensure your cover page looks great on every device, its responsive design will automatically stack the content into a single column. This means that your cover page will naturally look a little different on mobile than it does on a computer. While your cover page's exact mobile appearance depends on your layout and content, here are some general rules.

Accessing this feature

Cover pages aren't available in version 7.1. To create a similar look, you can hide the header and footer on certain pages.

Preview with device view

Use device view to preview how your cover page appears on a mobile device, tablet, or a computer. We also recommend visiting your site on your own device. To visit your site from a mobile device, type your page URL into your mobile browser's navigation bar. Your site doesn't have a different address for mobile devices.

Mobile background images

If you're using background imagery on your cover page, we recommend using an image without text or borders that offers some flexibility with cropping. For more help with this, review our background image best practices

Text on mobile

If the body text on a cover page has a very large font size, longer words and phrases could get cut off on mobile devices. For best results, we recommend keeping the body text short, using a smaller font size for body text, and adding spaces between words.

Overall layout changes on mobile

Here are a few adjustments you’ll notice when your cover page is viewed on a mobile device:

  • Split layouts (like Flash and Spotlight) stack vertically with the image stacked above the text.
KB Guide Image
  • Layouts with split text (like Debut and Projector) stack the left-side text above the right-side.
KB Guide Image
  • The Harbor layout splits horizontally with the map stacked above text.
KB Guide Image
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.

Cover page mobile styles in version 7.0