Mobile Responsiveness for CXUC

Summary

This article provides an overview of the automatic mobile responsiveness feature for the Customer  Experience/User Community (CXUC) platform. Mobile responsiveness automatically optimizes the CXUC View Mode and Homepage consumption experience for viewports under 600px, ensuring a high-quality, accessible, and user-friendly experience on all mobile devices without requiring manual adjustments from content creators.

Background of the Concept

Previously, accessing CXUC content on mobile phones and tablets presented several usability challenges. Users frequently encountered broken multi-column layouts, cramped tap targets, inconsistent typography, and scroll-trapped embeds (such as Figma or Storybook widgets). These friction points reduced content engagement and impacted overall adoption.

To resolve these challenges, mobile responsiveness introduces automated layout adjustments, fluid typography, and touch-friendly navigation components to deliver a seamless mobile experience.

What's Changed?

Mobile responsiveness applies specific layout and styling rules automatically based on the user's screen size. The core enhancements include:

Layout & Stacking

  • Single-Column Collapse: On viewports under 600px, all multi-column sections automatically collapse into a single vertical stack at 100% width.

  • Asymmetric Layouts: Non-equal column layouts (such as 1/3 + 2/3) stack vertically instead of shrinking, preserving content readability.

  • Widget Grids: Layout grids containing 4 or more elements automatically transition through an intermediate 2×2 tablet layout before collapsing into a 1×1 full mobile stack.

Typography

  • Body Text: Text scales down to 90% of its desktop value, maintaining a strict minimum size floor of 16px to ensure readability.

  • Headings: Large headings and mega-text (ranging from 150px to 300px) scale fluidly down to approximately 15% to 20% of their desktop size using dynamic CSS scaling.

  • Small Text: Any text configured below 16px on desktop is capped so that it never drops below 12px on mobile devices.

Padding & Spacing

  • Horizontal Padding: On mobile screens (< 600px), custom desktop padding values are overridden by a standard 24px mobile gutter.

  • Vertical Padding: Section padding automatically scales down to approximately 50% of the desktop value to eliminate excessive blank vertical space.

  • Column Gaps: Spaces between columns are preserved but capped at a maximum of 40px to keep stacked elements cleanly separated.

Bynder Header Navigation

  • Responsive Layout: The header resizes elements in its navigation, hides the header logo to save on space, and collapses elements into an additional menu.  

  • Scroll-Aware Behavior: To maximize screen space, the Bynder navigation header automatically hides when a user scrolls down the page.

  • Instant Reappearance: The header immediately reappears when the user scrolls back up, ensuring navigation links remain easily accessible.

Limitations

  • CXUC Overview page: The listing page for Guides, Groups and Pages is not currently responsive.
  • CXUC Editing page: The editing page (and other admin based pages) within CXUC are not currently optimized for mobile use. 
  • Non-CXUC pages: Pages outside the CXUC User Experience are not currently optimized for mobile use
     

Related Articles

Updated