Skip to content
    Flow-alerta.cab
    Editorially reviewed on: 2 sources
    Your reading view

    The short answer · 15 words

    In short

    Breakpoints are conditions at which the presentation of a layout changes in a targeted way.

    Flow-alerta.cab (2026): Breakpoints. https://flow-alerta.cab/en/glossar/breakpoints. Editorially reviewed on: 09 October 2026.

    How much detail would you like?

    Practical

    Helps make websites understandable, operable and usable for more people.

    Possible example: A card grid changes from three columns to one.

    Possible application in small and medium-sized businesses: A card grid changes from three columns to one.

    At a glance

    Core
    Layout breakpoints define switching conditions, often based on the available width. CSS media queries can also take other media features into account. Suitable thresholds are guided by the content and how usable it is, rather than just by device models.
    Use
    Helps make websites understandable, operable and usable for more people.
    Example
    Possible example: A card grid changes from three columns to one.
    Limits
    Choosing breakpoints solely by device models rather than by the actual content.

    In context

    Mobile-First Approach

    Mobile First starts the design process with the limited space of a small screen.

    Atomic Design

    Atomic Design organises design elements from small building blocks to complete pages.

    Questions about this term

    What does Breakpoints mean?

    Breakpoints are conditions at which the presentation of a layout changes in a targeted way.

    What mistakes should be avoided?

    Choosing breakpoints solely by device models rather than by the actual content.

    All details and background

    Layout breakpoints define switching conditions, often based on the available width. CSS media queries can also take other media features into account. Suitable thresholds are guided by the content and how usable it is, rather than just by device models.

    ELI5 – Explained simply

    Like switching points at which columns move below one another.

    Why it matters in practice

    Helps make websites understandable, operable and usable for more people.

    Example

    Possible example: A card grid changes from three columns to one.

    Pitfalls and limits

    • Choosing breakpoints solely by device models rather than by the actual content.

    Origin & history

    Current CSS documentation describes media queries for width, orientation and other media features. Layout breakpoints should be based on the content and the space it requires.

    Use in mid-sized companies

    • Possible application in small and medium-sized businesses: A card grid changes from three columns to one.

    Related terms

    Matching Flow-alerta service

    Websites & web applicationsWebsites & web applications

    Matching tool / use case

    View use casesUse case: UX and accessibility assessment

    Sources

    Quellen geprüft am 09.10.2026. Redaktionelle Anwendungsbeispiele sind hypothetisch; kein Nachweis realer Kundenergebnisse.

    Editorially reviewed on:

    Next step

    Put knowledge into practice

    Discuss your projectView use cases