How do you change the breakpoint in CSS?

A breakpoint in CSS is not a property you set; it is the viewport width inside a media query at which your layout changes. So you change a breakpoint by editing the width value in the media query's condition. For example, turning @media (min-width: 768px) into @media (min-width: 820px) moves the breakpoint from 768px to 820px. You choose min-width (mobile-first) or max-width (desktop-first), pick a value that matches where your layout actually breaks, and optionally express it in em/rem or with the modern range syntax. If you are using a framework, you instead change the values in its config rather than hand-writing the media query.

What a Breakpoint Actually Is

A breakpoint is simply a width threshold where you want your design to adapt, single column on phones, two columns on tablets, three on desktops. CSS has no dedicated "breakpoint" keyword. The threshold is whatever number you write inside an @media condition, which is why "changing a breakpoint" always comes down to editing that number. If you want the full anatomy of the rule itself, see What Is a Media Query CSS?.

Set or Change a Breakpoint With a Media Query

Below, a card is a single column by default and becomes a three-column grid once the viewport reaches 768px. The breakpoint is the 768px in the condition.

/* Base (mobile) styles */
.cards {
  display: block;
}

/* Breakpoint at 768px */
@media (min-width: 768px) {
  .cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

To change this breakpoint so the grid kicks in later, you edit only the value, nothing else has to move.

/* Same rule, breakpoint moved from 768px to 900px */
@media (min-width: 900px) {
  .cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

Steps to Change an Existing Breakpoint

• Find the rule: locate the @media block whose width controls the layout you want to shift (search your stylesheet for @media).
• Decide the new width: resize your browser until the layout looks awkward and note that width; that is where the breakpoint belongs.
• Edit the value: replace the number in the condition, for example change min-width: 768px to min-width: 820px.
• Check both sides: confirm the layout is correct just below and just above the new value so you have not created a gap or overlap.
• Validate across viewports: test the change on several screen sizes and browsers, since rendering can differ between engines.

Mobile-First (min-width) vs Desktop-First (max-width)

The direction of your breakpoints determines which keyword you use:

• min-width (mobile-first): base styles describe the smallest screen, and each breakpoint adds styles as the viewport grows. This is the modern default and keeps low-end devices light.
• max-width (desktop-first): base styles describe the largest screen, and each breakpoint overrides them as the viewport shrinks. Useful when you are retrofitting an older desktop-only layout.

The same layout written mobile-first:

/* Mobile-first: start small, scale up */
.nav { flex-direction: column; }

@media (min-width: 768px) {
  .nav { flex-direction: row; }
}

And written desktop-first:

/* Desktop-first: start large, scale down */
.nav { flex-direction: row; }

@media (max-width: 767.98px) {
  .nav { flex-direction: column; }
}

Avoid Overlap at the Boundary

If you mix min-width and max-width at the same number, both rules match at that exact pixel and you get unpredictable results. Subtract a fraction (Bootstrap subtracts 0.02px) so the ranges never touch.

/* Problem: both match at exactly 768px */
@media (max-width: 768px) { /* ... */ }
@media (min-width: 768px) { /* ... */ }

/* Fix: clean handoff */
@media (max-width: 767.98px) { /* ... */ }
@media (min-width: 768px)   { /* ... */ }

Common Breakpoint Values

These conventional values (popularized by Bootstrap) are convenient starting points, but they are not rules. Where possible, place breakpoints where your content breaks, not where a device happens to sit.

For guidance on the single most-discussed value, the mobile threshold, see What Is CSS Breakpoint for Mobile?.

px vs em/rem Breakpoints

Changing a breakpoint to a relative unit makes it respect the user's font-size and zoom. Inside a media query, em is always based on the 16px browser default, so 48em resolves to 768px regardless of element styling.

/* px breakpoint */
@media (min-width: 768px) { /* ... */ }

/* Same breakpoint expressed in em (768 / 16 = 48) */
@media (min-width: 48em) { /* ... */ }

Modern Range Syntax

Media Queries Level 4 lets you write breakpoints with comparison operators, which is shorter and avoids the off-by-a-fraction overlap problem entirely. It is supported across current evergreen browsers.

/* Old way */
@media (min-width: 768px) { /* ... */ }

/* Range syntax */
@media (width >= 48rem) { /* ... */ }

/* A band between two breakpoints */
@media (48rem <= width <= 75rem) { /* ... */ }

Changing Breakpoints in a Framework

If you use Bootstrap or Tailwind, you should not hand-edit their generated media queries. Change the values in their config so every utility and component stays consistent.

Bootstrap (Sass) - override the $grid-breakpoints map before importing Bootstrap:

// custom.scss
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 820px,   // changed from 768px
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

@import "bootstrap/scss/bootstrap";

Tailwind CSS v3 - edit theme.screens in your config:

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      sm: "640px",
      md: "820px",   // changed from 768px
      lg: "1024px",
      xl: "1280px"
    }
  }
};

In Tailwind CSS v4 you do the same thing in CSS by redefining the --breakpoint-* tokens inside an @theme block.

Breakpoints vs Container Queries

A viewport breakpoint reacts to the whole window. A container query reacts to the width of a component's container, so the same component can adapt independently in a sidebar versus a full-width slot. Container queries complement breakpoints rather than replace them.

.card-list {
  container-type: inline-size;
}

/* Reacts to the container, not the viewport */
@container (min-width: 30rem) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

Testing Breakpoints Across Viewports and Browsers

After you change a breakpoint, confirm it actually fires where you expect. The fastest local check is your browser's DevTools: open the responsive/device mode (the device-toolbar toggle), then drag the viewport edge and watch the layout flip exactly at your new value. Always check the pixel just below and just above the breakpoint.

Because layout engines and default font sizes differ, a breakpoint that looks right in one browser can behave differently in another, especially with em/rem values and user zoom. You can validate the same change across thousands of real browser and OS combinations and real devices using TestMu AI's Real Device Cloud, which lets you preview your responsive layout at every breakpoint without maintaining a local device lab. For a broader picture of building responsive layouts, see How Do I Make My CSS Code Responsive?.

Frequently Asked Questions

How do you change a breakpoint in CSS?

A breakpoint lives inside a media query condition, so you change it by editing the width value in that condition. Changing @media (min-width: 768px) to @media (min-width: 820px) moves the layout switch to 820px. There is no separate breakpoint property; the number in the @media rule is the breakpoint.

Should I use min-width or max-width for breakpoints?

Use min-width for a mobile-first approach, where base styles target small screens and each breakpoint adds styles as the viewport grows. Use max-width for desktop-first, where base styles target large screens and breakpoints override downward. Mobile-first with min-width is the modern default.

What are the standard CSS breakpoint values?

Common framework-derived values are 576px, 768px, 992px, 1200px, and 1400px. They are useful defaults, not rules. Content-driven breakpoints, placed where your layout actually breaks, usually beat copying device presets.

Should breakpoints use px or em/rem?

em and rem breakpoints are generally preferred because they scale with the browser font size and zoom. In a media query, em is relative to the 16px browser default, so 48em equals 768px. px is simpler but ignores the user's font preferences.

How do I change the default breakpoints in Bootstrap or Tailwind?

In Bootstrap, override the $grid-breakpoints Sass map before importing the framework. In Tailwind v3, edit theme.screens in tailwind.config.js; in v4, redefine --breakpoint-* tokens in an @theme block. You are changing the generated media queries rather than writing your own.

Are container queries a replacement for breakpoints?

No, they are complementary. Breakpoints respond to the viewport, while container queries respond to a component's container width. Container queries make a component reusable in different slots, but you still use viewport breakpoints for page-level layout.

• What Is a Media Query CSS?
• What Is CSS Breakpoint for Mobile?
• How Do I Make My CSS Code Responsive?
• What Is CSS Responsive Coding?
• What Is the Responsiveness in CSS?