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

Advanced mobile styles

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
  • Adjust the logo's size



  • 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


  • 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
  • Hide the index page thumbnail grid titles
  • 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.


  • Scaling fonts
  • Store page style options
  • Replace the logo with the site title


  • 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
  • Set the site title's font and size
  • Adjust the mobile navigation background color


  • 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:

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?
18 out of 153 found this helpful