How to Use CSS Breakpoints and Media Query Breakpoints for Responsive Design

Sauce AI for Test Authoring: Move from intention to execution in minutes.|xBack to ResourcesBlogPosted

February 05, 2026 · 11 min read · Testing Guide

Sauce AI for Test Authoring: Move from intention to execution in minutes.

Blog

Posted March 9, 2023

How to Use CSS Breakpoints and Media Query Breakpoints for Responsive Design

Learn how to combine breakpoints and medium queries to create your own responsive blueprint. You & # x27; ll be capable to offer an optimal browse experience to all your visitors, regardless of their device & # x27; s physical sizing.

Mod websites should act seamlessly across device, from ultrawide background displays to narrow portrait smartphones. Sites that mechanically scale to the user ’ s viewport offer a sander browsing experience, making it more likely visitors will regress.

Websites that correct their layout as the viewport resizes enforce theresponsive design shape. They ’ re built usingmedia queries, a all-important feature of the CSS language that permit you selectively utilize styles based on device characteristics such as width, superlative, and orientation.

Breakpoints and Responsive Design

What are CSS breakpoints? Breakpoints are the measure where a website ’ s layout snaps to match a new viewport size. You set breakpoints so the correct subdivision of the UI appear and disappear as the available infinite changes. They ’ re used to reflow content for different devices, conditionally reveal UI elements that are hide on smaller screens, and adapt to alternative rendering modes such as printer output.

Most sites use several key breakpoints to switch between major layout. These are normally correlated with the mobile, tablet, and desktop twist class. Popular CSS frameworks all include their own predefined breakpoints:

Framework	Small (Mobile)	Medium (Tablet)	Large (Small Monitor)	Extra Large (Large Monitor)
Bootstrap	576px	768px	992px	1200px
Semantic UI	N/A	723px	933px	1127px
Tailwind	640px	768px	1024px	1280px

This diagram shows how each breakpoint increases the available container breadth within the Bootstrap framework:

All three framework move to the next layout at a similar breakpoint. The exception is Semantic UI, which adopts larger layouts earlier (at smaller viewport widths) than either Bootstrap or Tailwind. Below their pocket-size breakpoint, all the frameworks size factor to fill the total width of the screen.

Selecting Breakpoints

Most sites end up adopt a set of chief breakpoints similar to those listed above. They ’ re prevalent within frameworks for a intellect, as the values neatly gibe to most common device types. Typical phones have a CSS width below 600px, while tablets are usually under 1000px.

You shouldn ’ t be constrained by these breakpoints, though. There are so many combinations of viewport and content that it ’ s impractical to expect all sites to work well with a framework ’ s built-in ranges.

Add a breakpoint when your layout starts to interrupt, elements are absurdly sized, or contented becomes hard to say, such as paragraphs that are too wide for your oculus to scan. You can identify natural breakpoints by test your site with a tool like, where you can quickly compare democratic viewports.

Using CSS Media Queries to Implement Breakpoints

You can add breakpoints to your CSS styles usingmedium interrogation. Media queries support many conditions, including viewport width, orientation, aspect proportion, and theexploiter ’ s favour color scheme. The styles you nest inside the query will be applied when the precondition matches.

For autonomous testing across multiple user personas, check out SUSATest — it explores your app like 10 different real users.

A Basic Example: Reflowing Grid Columns

Reflowing a multicolumn grid layout for nomadic device is one of the most common responsive design necessary. Here ’ s a CSS snippet which does but that. Copy the code, salve it toindex.html, and open the file in your web browser:

1
<!DOCTYPEhtml>
2
3
<html>
4
<head>
5
<style>
6
.container div{
7
width:100%;
8
9
height:200px;
10
}
11
12
.container div: nth-child(1){
13
ground:lightcoral;
14
}
15
16
.container div: nth-child(2){
17
background:lightsalmon;
18
}
19
20
.container div: nth-child(3){
21
background:lightblue;
22
}
23
24
.container{
25
display: grid;
26
27
grid-template-columns:1fr;
28
}
29
30
@media screen and(min-width:576px){
31
.container{
32
grid-template-columns:repeat(2,1fr);
33
}
34
}
35
36
@media screen and(min-width:768px){
37
.container{
38
grid-template-columns:repeat(3,1fr);
39
}
40
}
41
</style>
42
</head>
43
44
<body>
45
<divclass="container">
46
<div></div>
47
48
<div></div>
49
50
<div></div>
51
</div>
52
</body>
53
</html>
54

The breakpoints gibe the nomadic and tablet sizes used by the Bootstrap framework, but you can change them for your site.

Try loading the page on a tablet or desktop gimmick with a viewport width larger than 768px. You ’ ll see the three colored & lt; div & gt; element expose in individual columns:

Now resize your browser window or load your page on a telephone. The dark ingredient will break into a single column when the viewport breadth goes below 576px:

The CSS works by initially delimit the grid as experience a single column. Two media queries soincreasingly enhancethe layout by adding column as the viewport expands. Themin-widthcondition won ’ t utilize the nested styles unless the viewport is at least as across-the-board as the breakpoint you specify.

Changing Other Styles

You can use any valid CSS style definition within a medium enquiry. Although the column now flop, it might be the rightmost one that make your most important content. That column get the bottom row on mobile device, so it ’ s concealed unless you scroll down. You could address this by expand your media interrogation to reorder the items:

1
.container div: last-child {
2
order: -1;
3
}
4
5
@ media blind and (min-width: 576px) {
6
.container {
7
grid-template-columns: repetition (3, 1fr);
8
  }
9
10
.container div: last-child {
11
order: unset;
12
  }
13
}
14

The last element in the grid is targeted and assigned a nonpayment order of-1, meaning it will render as the first element. Inside the media question, the order go reset to its default value when the viewport is big enough. This restores its natural order so that it still appear as the final ingredient on larger device.

Querying Orientation

Some sites might want layout adjustments based on orientation, regardless of the viewport ’ s actual sizing. You could decide that column will always collapse into rows when a portraiture twist is expend.

This example defaults the grid to hold three columns but founder them whenever the viewport is portrait:

1
.container {
2
grid-template-columns: repeat (3, 1fr);
3
}
4
5
@ media blind and (orientation: portrait) {
6
.container {
7
grid-template-columns: 1fr;
8
  }
9
}
10

Now the columns prostration when the viewport is portrait, still if it ’ s a large device:

Customizing Printed Styles

Media queries are also used to customize your webpage ’ s printing styles. You can set the media type—the first keyword in the query—toprintinstead ofscreen.

When a media case is specified, the fashion will only apply when the page is rendered in that circumstance. Theprinttype is spark when you print the page, whilescreenrefers to normal browsing on a device. You can differentiate styles as suitable for both types using theall keyword.

Multicolumn layouts are frequently too wide to publish cleanly. You can use aprintmedium inquiry to force the grid to prostration when the page is printed:

1
.container {
2
grid-template-columns: repetition (3, 1fr);
3
}
4
5
@ media mark {
6
.container {
7
grid-template-columns: 1fr;
8
  }
9
}
10

You can still use additional conditions withprintqueries. This one retains the columnar layout but drops the last grid item when portrait paper is use:

1
.container {
2
grid-template-columns: repeat (3, 1fr);
3
}
4
5
@ media print and (orientation: portrayal) {
6
.container {
7
grid-template-columns: repeat (2, 1fr);
8
  }
9
10
.container div: last-child {
11
show: none;
12
  }
13
}
14

Media Query Gotchas and Best Practices

Selecting the correct breakpoints and creating media queries that enforce your designing can be troublesome. Here are a few common gotchas to look for if you run into problems.

Media Queries Don ’ t Affect Specificity

Media queries get no effect onspecificity. It ’ s a common misconception that styles nested within a media query are automatically more specific.

The CSS snippet below won ’ t have the desired result. The element will perpetually be grim, even if the viewport is littler than 576px. The default styles are written after the media query, so they incessantly overwrite its contents:

1
@ medium all and (max-width: 576px) {
2
.container div: nth-child (1) {
3
background: lightcoral;
4
  }
5
}
6
7
.container div: nth-child (1) {
8
background: lightblue;
9
}
10

You can fix this by either positioning the media question after the default mode or using a more specific selector within the media query:

1
@ media all and (max-width: 576px) {
2
body .container div: nth-child (1) {
3
ground: lightcoral;
4
  }
5
}
6
7
.container div: nth-child (1) {
8
ground: lightblue;
9
}
10

Browser Compatibility Issues

The introductory medium query syntax is now a long-established piece of CSS. However, newer component such asadvanced degree 4 selectors are not universally supported, so you might still run into problems where some fashion don ’ t work in all browsers.

You can find any lurking number by thoroughly testing your site with as many device as possible. Use a testing platform like to insure whether your CSS behaves systematically in all major browsers, such as Firefox, Chrome, Safari, and Opera.

Be Measured with Overlapping Breakpoints

A common cause of buggy styling is breakpoint ranges that overlap:

1
.container div: nth-child (1) {
2
ground: lightcoral;
3
}
4
5
@ media all and (min-width: 576px) {
6
.container div: nth-child (1) {
7
ground: lightslategray;
8
  }
9
}
10
11
@ media all and (max-width: 576px) {
12
.container div: nth-child (1) {
13
background: lightgreen;
14
  }
15
}
16

When the viewport width is just 576px, both media query rules are valid. Themin-width and max-widthweather each evaluate to true because they include 576px in their range. The element turns green because that media query is written last. However, you might expect the element to turn gray, especially if styles are being apply by multiple different files.

You need to set one of the queries to annihilate the ambiguity. You can tweak themin-widthbreakpoint to apply from 1px above themax-widthbreakpoint, as in the example below, or reduce themax-widthbreakpoint alternatively:

1
.container div: nth-child (1) {
2
background: lightcoral;
3
}
4
5
@ media all and (min-width: 576px) {
6
.container div: nth-child (1) {
7
background: lightslategray;
8
  }
9
}
10
11
@ media all and (max-width: 575px) {
12
.container div: nth-child (1) {
13
background: lightgreen;
14
  }
15
}
16

Use a logical access across all your site ’ s breakpoint wander to prevent overlapping styles from occurring.

Px vs. Em vs. Rem in Media Query Conditions

The px unit (pixels) creates absolute value, whereas ems and rems are relative. Em units are relative to the parent component ’ s font sizing, while rem units are relative to the font size of the& lt; html & gt;factor. It ’ s good exercise to use em and rem tosize elements in your patternbecause they provide a point of automatic scalability based on the exploiter ’ s device and surround content.

Using em and rem in media query weather can be confusing, though. The unitsbehave differentlyin this setting, referring to theinitial face sizeof the browser and not any changes made in your CSS. This means1remin your media query condition might not be the same as width:1remin a way:

1
html {
2
font-size: 10px;
3
}
4
5
p {
6
/ * 20px * /
7
8
font-size: 2rem;
9
}
10
11
/ * Applies at 800px, not 500px! * /
12
13
@ media (min-width: 50rem) {
14
  p {
15
/ * 15px * /
16
17
font-size: 1.5rem;
18
  }
19
}
20

Most browser use 16px as their default baptistry size. The CSS above changes this to 10px, so 2rem is equivalent to 20px. However, CSS media queries continue to be evaluated use the original 16px size, so 50rem in the media query resolves to 800px (50 * 16) and not 500px (50 * 10).

Sticking to px unit in your media query conditions creates the most predictable results.

Conclusion

In this article, you learned about respective ways in which media queries give you the tractability to assemble complex responsive designs.

Website visitant expect to be capable to visit from any gimmick and still enjoy a comfortable browsing experience. To achieve this, you need to define breakpoints that conform to different viewport size by reflowing the layout and selectively showing factor.

CSS media query let you swop out parts of your stylesheet depending on the viewport ’ s characteristics. Any styles written within the media query will entirely utilise when its condition matches, such as the browser being desktop-sized and in landscape orientation. If you don ’ t use media query, you ’ ll probably find that parts of your site overflow or go unusable at uttermost sizes.

You can make your own site adaptive by testing different viewports and setting appropriate breakpoints. The cross-browser examination platform provides access to hundreds ofreal and emulated devicesso you can check that your site works seamlessly for all your visitors..).