Optimizing Mobile View

Optimizing Mobile View

Over 60% of e-commerce traffic comes from mobile devices. Nuvi themes are built with responsive design, but you can take additional steps to ensure the best mobile experience for your customers.

How Responsive Design Works in Nuvi

Every Nuvi theme automatically adapts its layout based on screen size:

• Desktop (1024px+) — Full multi-column layouts, large hero images, hover effects.
• Tablet (768px–1023px) — Reduced columns, slightly smaller typography.
• Mobile (below 768px) — Single-column layout, hamburger menu, touch-friendly buttons.

Section layouts, product grids, and navigation all respond automatically. You do not need to build separate mobile pages.

Testing Mobile View

Always test your store on mobile before and after making changes:

1. Browser DevTools — Press F12 in Chrome or Firefox, click the device toggle icon (or press Ctrl+Shift+M), and select a mobile device like iPhone 14 or Pixel 7.
2. Real Device Testing — Open your store URL on your phone. This catches issues that emulators miss, like touch target sizes and scrolling behavior.
3. Google Mobile-Friendly Test — Visit search.google.com/test/mobile-friendly and enter your store URL for a Google assessment.

Common Mobile Issues and Fixes

Text Too Small to Read

If body text is hard to read on mobile, your base font size might be too small. Nuvi themes use a minimum of 16px on mobile. If you have added custom CSS with smaller sizes, remove or adjust it:

@media (max-width: 768px) {
  body { font-size: 16px; }
}

Buttons Too Small to Tap

Touch targets should be at least 44x44 pixels. If you have custom buttons that are smaller, increase their padding.

Images Not Fitting the Screen

Ensure product images and hero banners use max-width: 100%. Nuvi handles this automatically, but custom images inserted via the rich text editor may need the CSS rule applied manually.

Horizontal Scrolling

If the page scrolls horizontally on mobile, an element is wider than the viewport. Use your browser's DevTools to identify the overflowing element and fix it with overflow: hidden or by setting max-width: 100%.

Mobile Performance Tips

• Optimize images — Use compressed JPEG or WebP format. Nuvi automatically serves optimized images, but source images should still be under 2MB.
• Limit sections — Each section adds to page weight. Keep your homepage to 6–8 sections for fast mobile loading.
• Minimize custom CSS — Large custom CSS blocks can slow rendering on mobile.
• Test on slow connections — In Chrome DevTools, use Network Throttling set to "Slow 3G" to see how your store loads on poor connections.