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

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

Some templates have mobile-specific tweaks in their Style Editors for an extra layer of customization. This guide goes over those options.

Options by template

To preview your mobile design as you make changes, open Device View before opening the Style Editor.

  • 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.
Template family Mobile options
Avenue
  • Adjust the logo's size
Aviator, Aubrey, Encore
Brine, Aria, Basil, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Polaris, Rally, Rover, Sofia, Sonny, Sonora, Thorne, Wav, West
  • 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
  • Products Page style options
  • See all style tweaks
Farro, Haute
  • 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
  • Products Page style options
  • See all style tweaks
Flatiron
  • Hide the Index Page thumbnail grid titles
Galapagos
  • Set the color and font of the site title
  • If you have a logo on desktop, you can add a separate mobile logo and set its height, or display a site title instead.
Skye, Foundry, Indigo, Ready, Tudor
  • Scaling fonts
  • Products Page style options
Supply
  • Replace the logo with the site title
Tremont, Camino, Carson, Henson
  • Scaling fonts
  • Different size settings for different browser widths. For example, set the height of your logo for desktop, tablet, and smartphone.
  • Products Page style options
Wells
  • Set the site title's font and size
Wexley
  • Adjust the mobile navigation background color
York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori
  • Scaling fonts
  • Top mobile navigation bar
  • Set separate styles for header icons
  • Products Page style options
  • See all style tweaks

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:

Products Page

For templates that support the Advanced Products Page, you can give item titles, prices, and sale prices a unique style for mobile display. To learn more, visit Styling the Advanced Products Page.

Was this article helpful?
4 out of 12 found this helpful