Breakpoint
A breakpoint is a screen width at which a website's layout changes, such as moving from one column on phones to two columns on tablets.
How Xodia handles breakpoints: the size menu lists your site's own breakpoints from Phone to Wide, and the Style panel sets a style for every size or from the size you picked up.
Updated
On this page
What it is
CSS media queries apply styles from a width up (or down). Tailwind names its default breakpoints sm, md, lg, xl and 2xl, and a class such as md:grid-cols-2 takes effect from the md width upward. Sites can set their own breakpoint widths.
Designing at each breakpoint, rather than only on a desktop, is what keeps a site usable on phones. Fewer, well-chosen breakpoints are easier to maintain than a rule for every device.
In Xodia
The size menu in the top bar lists six breakpoints from Phone to Wide, read from your site's own breakpoints, and the canvas width can be dragged. A style you set applies at every size, or from the size you picked up, and the Style panel says which.
Comments remember the size they were left at, and the size buttons count open comments at each one.
Read more
Related terms
- Responsive designResponsive design is building one website that adapts its layout, images and type to every screen size, instead of making separate sites for phones and desktops.
- Fluid typeFluid type is text whose size grows smoothly with the width of the screen between a minimum and a maximum, usually written with the CSS clamp() function.
- Tailwind v4 theme tokensTailwind v4 theme tokens are CSS variables declared in an @theme block that define a site's colours, fonts, sizes and spacing, and that Tailwind turns into utility classes.