How can I make a page on my site only visible on mobile?

Technical Q&A

Topic summary

A user seeks to make specific pages mobile-only on their Shopify site (pippbaby.com) because content appears overstretched on desktop.

Solution Provided:

  • Instead of hiding pages completely, apply CSS to limit maximum width and center content on desktop
  • Add custom CSS to theme.css or themes.scss.liquid file
  • Alternative: Use Shopify AppStore apps for custom CSS/JS injection

Pages Addressed:

  1. Freebies page - Apply max-width constraint with media query for screens wider than 760px
  2. Contact page - Limit top graphic width using #contact-us .brick__block__image selector
  3. Homepage banners - More complex; reducing banner width affects all banners site-wide, requiring theme-level code access for selective adjustments

Status: Ongoing - user needs theme access to implement homepage-specific width customizations without impacting other banner elements.

Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
3

Where exactly would I add this and in what exact format? Thanks!