Breakpoints

Breakpoints allow you to define responsive widget styles that adapt to different screen sizes, ensuring optimal rendering on mobile, tablet, and desktop.

Breakpoint Definitions

Key	Width (px)	Device Type
sm	576	Mobile
md	768	Tablet
lg	992	Laptop
xl	1200	Desktop/Large screen

Breakpoint values are predefined and cannot be customized.

How Breakpoints Work

• The default object defines base styles applied across all screen sizes.

• Each breakpoint (sm, md, lg, xl) can override specific style properties as needed.

• Breakpoints follow a mobile-first approach: smaller screens inherit from default unless explicitly overridden.

Example: Responsive DidomiStyle Payload

"style": {
  "default": {
    "backgroundColor": "#ffffff",
    "padding": "12px",
    "borderRadius": "4px",
    "borderWidth": "1px",
    "boxShadow": "0px 2px 6px rgba(0,0,0,0.1)",
    "margin": "8px 0",
    "color": "#000000",
    "fontSize": "14px",
    "lineHeight": "1.5",
    "fontWeight": "400"
  },
  "sm": {
    "fontSize": "14px"
  },
  "md": {
    "fontSize": "16px"
  },
  "lg": {
    "fontSize": "18px"
  },
  "xl": {
    "fontSize": "20px"
  }
}

In this example:

• The widget starts with a default layout

• fontSize increases progressively at each screen breakpoint

See DidomiStyle Options for additional breakpoint examples using the API.

---

Best Practices

• Always define a default style as fallback

• Only override what’s necessary at each breakpoint

• Test styles on real devices or using responsive preview tools