How to Set Breakpoint for Mobile in CSS Using Media Queries

To set a breakpoint for mobile in CSS, use a @media rule with a max-width value that matches typical mobile screen widths, such as @media (max-width: 600px). Inside this block, write CSS rules that apply only when the screen is that size or smaller.

Syntax

The basic syntax for setting a mobile breakpoint uses the @media rule with a max-width condition. This means the CSS inside applies only when the screen width is less than or equal to the specified value.

• @media: starts the media query
• (max-width: 600px): condition for screen width 600 pixels or less
• Curly braces { }: contain CSS rules for that condition

css

@media (max-width: 600px) {
  /* CSS rules for mobile screens */
  body {
    background-color: lightblue;
  }
}

Example

This example changes the background color and font size when the screen width is 600px or less, simulating a mobile device view.

css

body {
  background-color: white;
  font-size: 16px;
}

@media (max-width: 600px) {
  body {
    background-color: lightblue;
    font-size: 14px;
  }
}

Output

The page background is white with font size 16px on large screens. On screens 600px wide or smaller, the background changes to light blue and font size reduces to 14px.

Common Pitfalls

Common mistakes when setting mobile breakpoints include:

• Using min-width instead of max-width for mobile, which targets larger screens instead.
• Setting breakpoints too high or too low, causing styles to apply incorrectly.
• Not testing on actual devices or browser resizing tools.

Always remember: max-width targets screen sizes up to that width, perfect for mobile.

css

@media (min-width: 600px) {
  /* This targets screens wider than 600px, not mobile */
  body {
    background-color: yellow;
  }
}

/* Correct way for mobile */
@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Quick Reference

Breakpoint Type	CSS Syntax	Description
Mobile (small screens)	@media (max-width: 600px)	Applies styles on screens 600px wide or less
Tablet (medium screens)	@media (max-width: 900px)	Applies styles on screens 900px wide or less
Desktop (large screens)	@media (min-width: 901px)	Applies styles on screens wider than 900px

Key Takeaways

Use @media with max-width to target mobile screen sizes in CSS.

Common mobile breakpoint is max-width: 600px for most phones.

Inside the media query, write CSS rules that override default styles for small screens.

Test breakpoints by resizing the browser or using device emulators.

Avoid confusing min-width and max-width when targeting mobile devices.