Advanced mobile styles in version 7.0

Advanced mobile styles in version 7.0

false

Last updated March 13, 2026 21:35

Learn about the version 7.0 templates that have special mobile style options.

All Squarespace sites are optimized with responsive design, so your site can adjust to the format of any mobile device or browser.

Some templates in version 7.0 have mobile-specific tweaks in site styles for an extra layer of customization. This guide goes over those options.

This guide is for version 7.0. Version 7.1 doesn't have separate mobile styles. To learn more, visit How will my site appear on mobile devices?.

Options by template

To preview your mobile design as you make changes, open device view before opening site styles.

To find mobile tweaks, press Ctrl + F (Command + F on Mac) and search for the word Mobile.
For scaling fonts, search for the word Min.

Here are the mobile options in these template families:


Template family	Options
Avenue	- Adjust the logo's size
Aviator	- Display or hide the background image. You may need to adjust the background colors for the image to show. - Adjust the logo's size (except info pages)
Brine	- Add one or two mobile navigation bars - Choose whether the top bar is fixed - Set separate styles for header icons - Adjust where the icons appear - Set the width at which the site switches to mobile view (breakpoint) - Store page style options
Farro	- Add one or two mobile navigation bars - Choose whether the top bar is fixed - Set separate styles for header icons - Adjust where the icons appear - Store page style options
Flatiron	- Hide the index page thumbnail grid titles
Galapagos	- Set the color and font of the site title - If you have a logo on computer-view, you can add a separate mobile logo and set its height, or display a site title instead.
Skye	- Scaling fonts - Store page style options
Supply	- Replace the logo with the site title
Tremont	- Scaling fonts - Different size settings for different browser widths. For example, set the height of your logo for computer, tablet, and smartphone. - Store page style options
Wells	- Set the site title's font and size
Wexley	- Adjust the mobile navigation background color
York	- Scaling fonts - Top mobile navigation bar - Set separate styles for header icons - Store page style options

Types of mobile styles

Scaling fonts

Scaling fonts let you manually set the maximum and minimum sizes for titles, headings, and other key text. To learn more, visit Scaling fonts.

Logo size

In templates where you can adjust the logo's mobile size, we recommend setting your site logo to display smaller on mobile to reduce crowding.

Note: Only Galapagos supports uploading a separate mobile logo.

Mobile navigation bars display at the top or bottom of your mobile site. They contain header elements like the site title or logo, shopping cart, and search icon. You can customize the bar colors, choose where the elements display, and give them unique mobile styles.

For example, the Brine template supports up to two mobile bars:

Store page

For templates that support the advanced store page, you can give item titles, prices, and sale prices a unique style for mobile display. To learn more, visit Styling store pages.

Was this article helpful?

Yes No

34 out of 208 found this helpful

Yes No

Advanced mobile styles in version 7.0