Break Points

CSS Break Points Summary

Break points are screen widths where CSS changes. They let a page look different on phones, tablets, laptops, and larger screens.

@media (min-width: 700px) {
	.card {
		width: 50%;
	}
}

Why Break Points Exist

A phone screen is narrow. A desktop screen is wide. Break points let the design adjust when there is more or less room.

For example, cards might stack on a phone and sit next to each other on a wider screen.

Media Queries

A media query is the CSS code that creates a break point. The CSS inside it only runs when the screen matches the rule.

@media (min-width: 700px) {
	.box {
		font-size: 24px;
	}
}

Mobile First

Mobile first means the normal CSS is for small screens. Then media queries add changes for larger screens.

.cards {
	display: block;
}

@media (min-width: 700px) {
	.cards {
		display: flex;
	}
}

Common Break Point Changes

Break points are commonly used to change widths, columns, font sizes, spacing, menus, and whether items stack or sit side by side.

Keep Them Simple

A page does not need a break point for every device. It only needs break points where the layout starts to feel too cramped or too stretched.