Mobile Styles in Squarespace 7.0 Templates

All Squarespace sites feature responsive design, automatically adapting to any mobile device or browser. Some version 7.0 templates offer additional mobile customization options in Site Styles.

To access mobile options:

• Open Device Preview before Site Styles
• Use Ctrl + F (Command + F on Mac) to search for "Mobile"
• For font options, search for "Min"

Template-Specific Mobile Features:

Aviator:

• Background image toggle
• Logo size adjustment (except Information pages)

Brine:

• One or two mobile navigation bars
• Fixed top bar option
• Custom header icon styles
• Adjustable icon positioning
• Custom mobile breakpoint
• Shop Page styling

Farro:

• One or two mobile navigation bars
• Fixed top bar option
• Custom header icon styles
• Adjustable icon positioning
• Shop Page styling
• Index Page thumbnail grid title toggle
• Site title customization
• Separate mobile logo options

Skye:

• Font scaling
• Shop Page styling
• Logo/site title toggle

Tremont:

• Font scaling
• Multi-device size settings
• Shop Page styling
• Site title customization
• Mobile navigation background color

York:

• Font scaling
• Top mobile navigation bar
• Custom header icon styles
• Shop Page styling

Key Mobile Features:

Font Scaling:

• Manual control over maximum and minimum text sizes
• Applies to headings, titles, and key text

Logo Optimization:

• Smaller mobile logos recommended
• Reduces visual clutter

Mobile Navigation Bars:

• Top or bottom placement
• Customizable colors
• Flexible element positioning
• Support for header elements (logo, cart, search)
• Some templates support dual navigation bars

Shop Page Customization:

• Mobile-specific item title styles
• Custom sale price formatting
• Enhanced mobile shopping experience

These mobile optimizations ensure your Squarespace site maintains professional appearance and functionality across all devices.

Related Articles

Previous Articles