Responsive breakpoints - Fluid Topics - Latest

Fluid Topics Designer Guide
Category
Reference Guides
Audience
public
Version
Latest

Selecting a breakpoint displays the appearance of the page or template for the corresponding device and screen resolution.

The breakpoints per device type are as follows:

  • Desktop
  • Landscape tablet (max: 1280px)
  • Portrait tablet (max: 1024x)
  • Landscape mobile (max: 768px)
  • Portrait mobile (max: 480x)
  • Small portrait mobile (max: 320px)

A toolbar with five icons, from left to right: a desktop icon to display the desktop view, a horizontal tablet icon to display the landscape tablet view, a vertical tablet icon to display the portrait tablet view, a horizontal smartphone icon to display the landscape mobile view, and a vertical smartphone icon to display the portrait mobile view.

Removing a component applies to all devices and breakpoints (desktop, tablet, and mobile). It is not possible to remove a component for one device or breakpoint but not another.

  • Designing a page or template separately for each of the responsive breakpoints is important for accessibility and end-user satisfaction.
  • CSS changes made for one breakpoint apply to the current breakpoint and smaller formats. For example, a CSS modification to the vertical tablet display also applies to the vertical and horizontal mobile displays.
  • Desktop mode is selected by default.

When switching to a smaller device or screen resolution, the size of the canvas updates accordingly.