Advanced mobile styles in version 7.0

Last updated April 3, 2023

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.

Accessing this feature

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

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

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:

KB Guide Image

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.

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.

Advanced mobile styles in version 7.0