Mobile Styling Options in Squarespace 7.0

All Squarespace 7.0 sites automatically adjust to fit any device through responsive design. Some templates offer additional mobile-specific customization options for enhanced control over your site's mobile appearance.

To Access Mobile Settings:

• Open device-specific preview before accessing site styles
• Use Ctrl + F (Command + F on Mac) to search for "mobile"
• For font scaling options, search for "minimum"

Template-Specific Mobile Features:

Aviator

• Adjustable logo size
• Toggle background image visibility
• Background color customization

Brine

• Dual mobile navigation bars
• Fixed top bar option
• Customizable header icons
• Adjustable icon positioning
• Mobile breakpoint control
• Store page styling options

Farro

• Dual navigation bars
• Fixed top bar option
• Custom header icon styles
• Adjustable icon placement
• Store page customization
• Hidden thumbnail grid titles
• Site title styling
• Separate mobile logo option

Skye

• Font scaling
• Store page styling
• Logo/site title toggle

Tremont

• Font scaling
• Device-specific sizing
• Store page customization
• Site title styling
• Mobile navigation background color

York

• Font scaling
• Top navigation bar
• Custom header icons
• Store page styling

Core Mobile Features:

Font Scaling

• Set maximum and minimum sizes for titles and headings
• Maintains readability across devices

Logo Optimization

• Adjust logo size for mobile displays
• Create cleaner mobile presentation

Navigation Bars

• Top or bottom placement
• Customizable elements (site title, logo, cart, search)
• Color and layout options

Store Page Customization

• Mobile-specific product title styling
• Custom price display
• Sale price formatting
• Enhanced mobile shopping experience

These features ensure optimal viewing and functionality across all mobile devices while maintaining brand consistency and user experience.

Related Articles

Previous Articles