Mobile device styling in Squarespace version 7.0 offers template-specific customization options beyond standard responsive design. Here's what you need to know about mobile styling options across different templates.

Previewing and Finding Mobile Settings

• Open device view before accessing site styles
• Use Ctrl + F (Command + F on Mac) to search for "Mobile"
• For font scaling options, search for "Min"

Template-Specific Mobile Options

Aviator

• Adjustable logo size
• Toggle background image visibility
• Customizable background colors

Brine

• One or two navigation bars
• Optional fixed top bar
• Custom header icon styles and positioning
• Adjustable mobile breakpoint width
• Store page styling options

Farro

• One or two navigation bars
• Optional fixed top bar
• Custom header icon styles and positioning
• Store page styling options
• Optional thumbnail grid titles on index page
• Customizable site title appearance
• Separate mobile logo options

Skye

• Font scaling capabilities
• Store page styling options
• Option to replace logo with site title

Tremont

• Font scaling support
• Device-specific size adjustments
• Store page styling options
• Customizable site title
• Mobile navigation background color options

York

• Font scaling support
• Mobile top navigation bar
• Custom header icon styles
• Store page styling options

Key Mobile Style Features

Font Scaling

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

Logo Optimization

• Reduced logo size options for mobile devices
• Helps prevent content overcrowding

Mobile Navigation Bars

• Positioned at top or bottom
• Contains essential elements (site title, logo, cart, search)
• Customizable colors and element placement
• Some templates support dual navigation bars

Store Page Styling

• Custom item title styling
• Distinct regular and sale price formatting
• Mobile-specific display options

These mobile styling options help create a better user experience across different devices while maintaining your site's visual identity.

Related Articles

Previous Articles