Breakpoints

CSS Breakpoints Summary

A breakpoint is a screen width where CSS changes the layout so the page works better at that size.

Breakpoints are written with media queries. They are a core part of responsive design.

@media (max-width: 700px) {
	.cards {
		grid-template-columns: 1fr;
	}
}

This rule changes the cards layout when the browser is 700px wide or narrower.

Breakpoints Respond To Available Space

A wide layout may have several columns. A narrow layout may need one column so the content remains readable.

.cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

@media (max-width: 700px) {
	.cards {
		grid-template-columns: 1fr;
	}
}

Use Breakpoints When The Design Needs Them

Breakpoints should solve real layout problems. Add one when content becomes cramped, hard to read, or awkward to use at a certain width.

Do not choose breakpoints only because of specific device names. Screens come in many sizes, and the design should respond to the available space.

Test Across Widths

Resize the browser and check that text remains readable, images fit, buttons can be used, and layouts do not create unwanted horizontal scrolling.

The Responsive Design lesson explains the broader goal behind breakpoints.