Breakpoints
EthioWDS uses a small set of breakpoints so layouts and components can adapt to different screen sizes in a consistent way.
Default breakpoints
Use these widths in your media queries so your project aligns with the design system. Layouts typically switch from a single column (mobile) to multi-column or wider spacing at the larger breakpoints.
| Name | Min width | Typical use |
|---|---|---|
| Mobile | — | Default; single column, stacked layout |
| Tablet | 769px | Larger phones and tablets; can show sidebars or two columns |
| Desktop | 1025px | Laptops and desktops; full layout and spacing |
In practice, the design system often uses 768px and 1024px as max-width or min-width boundaries (e.g. “below 768px” for mobile, “1024px and up” for desktop). Use the same values in your own styles so behavior is consistent.
How to use breakpoints
In your stylesheet, write a media query that applies different layout or spacing when the viewport is at least (or at most) a given width. Prefer mobile-first: define the small-screen layout by default, then add min-width media queries for larger screens.
Example: show sidebar only on larger screens
/* Mobile: single column, no sidebar */
.main { width: 100%; }
/* Tablet and up: sidebar visible */
@media (min-width: 769px) {
.layout { display: flex; }
.sidebar { width: 280px; }
}Example: stack on mobile, row on desktop
/* Mobile first: stacked */
.grid { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 769px) {
.grid { flex-direction: row; }
}See also
Spacing — Spacing scale and responsive spacing. Design tokens — Overview of tokens. Guidance — Mobile-first design principles.