Back to Docs

Responsive Design

Breakpoints

RAVENCIBuilder includes three default breakpoints:

| Breakpoint | Width | |-----------|-------| | Desktop | 1200px+ | | Tablet | 768px – 1199px | | Mobile | Below 768px |

Switch between breakpoints using the device icons in the top bar.

Per-Breakpoint Overrides

Most styling properties can be overridden per breakpoint. When you change a value on a smaller breakpoint, it only applies at that size and below — desktop values cascade down by default.

Common responsive overrides:

  • Font size — Smaller headings on mobile
  • Padding/margin — Tighter spacing on small screens
  • Flex direction — Switch from row to column
  • Display — Hide elements on specific devices
  • Column widths — Stack columns on mobile

Responsive Visibility

Hide any element on specific breakpoints using the visibility toggle in the Advanced tab. Hidden elements are still in the DOM but set to display: none.

Preview

Use the responsive preview in the editor to test your layouts. The canvas resizes to match the selected breakpoint width.