Mobile styling options for different Squarespace 7.0 templates offer enhanced customization for responsive design. Here's what you need to know about template-specific mobile features:

Preview and Access Mobile Styles

• Use Device View to preview mobile design changes
• Search for "Mobile" in Site Styles panel using Ctrl + F (Command + F on Mac)
• Find font scaling options by searching for "Min"

Template-Specific Mobile Features

Aviator:

• Background image toggle
• Adjustable logo size (except Info pages)

Brine:

• One or two mobile navigation bars
• Fixed top bar option
• Custom header icon styles
• Adjustable icon placement
• Mobile breakpoint settings
• Store page styling

Farro:

• Dual mobile navigation bars
• Fixed top bar option
• Custom header icon styles
• Flexible icon placement
• Store page customization
• Index Page thumbnail grid title toggle
• Site title color/font settings
• Optional mobile-specific logo

Skye:

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

Tremont:

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

York:

• Font scaling
• Top mobile navigation
• Custom header icon styles
• Store page styling

Key Mobile Style Features

Font Scaling:

• Manual control of maximum/minimum sizes for headings and key text
• Ensures readability across devices

Logo Optimization:

• Reduced logo size for mobile views
• Prevents cluttered mobile layouts

Navigation Bars:

• Top/bottom placement options
• Customizable colors and element positioning
• Support for site title, logo, cart, and search features

Store Page Enhancement:

• Mobile-specific styling for item titles
• Custom sale price formatting
• Improved shopping experience on mobile devices

All these features maintain responsive design principles while offering precise control over mobile presentation. Each template's unique options allow for optimal mobile user experience customization.

Related Articles

Previous Articles