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

Cover page mobile styles

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.

This guide is for version 7.0. Cover Pages aren't available on version 7.1. 

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.

  • Layouts with split text (like Debut and Projector) stack the left-side text above the right-side.

  • The Harbor layout splits horizontally with the map stacked above all text.


Was this article helpful?
13 out of 78 found this helpful