# Breakpoint

URL: https://xodia.ai/glossary/breakpoint
Description: What a breakpoint is, how Tailwind names them, and how Xodia lets you style a page at each of your site's own breakpoints, from phones to wide screens.
Last updated: 2026-11-08

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 November 8, 2026

## 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

- [The visual editor](https://xodia.ai/product/visual-editor)
- [Comments and review](https://xodia.ai/product/comments)

## Related terms

- [Responsive design Responsive 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.](https://xodia.ai/glossary/responsive-design)
- [Fluid type Fluid 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.](https://xodia.ai/glossary/fluid-type)
- [Tailwind v4 theme tokens Tailwind 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.](https://xodia.ai/glossary/tailwind-theme-tokens)

[See every term in the glossary](https://xodia.ai/glossary)

Glossary