Responsive Design

Reading Time: 1 minutes Last Updated: October 22, 2025

RedFox Thank You is built with a mobile-first approach, ensuring your thank you pages look perfect on every device. All blocks include comprehensive responsive controls for desktop, tablet, and mobile views.

Mobile-First Approach#

What It Means#

Mobile-first design means:

  • Default styles work great on mobile
  • Enhancements are added for larger screens
  • Content is accessible on any device
  • Performance optimized for mobile networks

Why It Matters#

More than 50% of online shopping happens on mobile devices:

  • Customers complete purchases on phones
  • Thank you pages must work flawlessly
  • Mobile experience affects brand perception
  • Responsive design improves conversions

Responsive Breakpoints#

RedFox Thank You uses three standard breakpoints:

Desktop (Default)#

  • Min Width: 1024px and above
  • Default View: What you see in the editor
  • Typical Devices: Desktops, laptops, large tablets

Tablet#

  • Width Range: 768px to 1023px
  • Typical Devices: iPads, Android tablets, small laptops
  • Orientation: Both portrait and landscape

Mobile#

  • Max Width: 767px and below
  • Typical Devices: Smartphones, small tablets
  • Orientation: Primarily portrait

Responsive Controls Overview#

Where to Find Them#

Every block with responsive support shows device icons:

  1. Select any block (e.g., Order Details)
  2. Open block settings in the right sidebar
  3. Look for device icons: 🖥️ 📱 📱
  4. Click to switch between Desktop/Tablet/Mobile

How They Work#

Each device can have independent values:

  • Set different font sizes per device
  • Adjust spacing for smaller screens
  • Change layouts for mobile
  • Hide/show elements per device