---
title: Mobile CSS Starter – Typical Device Breakpoints
description: "Use this code below for your mobile CSS. With this, you can manage the CSS for every devices breakpoints. ``` /*################# mobile CSS #####################################*/ @media only screen and (min-width: 250px) and (max-width: 999px) { } @media only screen and (device-width:…"
url: "https://www.lukehayes.com.au/kb/mobile-css-starter-typical-device-breakpoints/"
updated: "2021-11-04"
category: CSS
---

# Mobile CSS Starter – Typical Device Breakpoints

Use this code below for your mobile CSS. With this, you can manage the CSS for every devices breakpoints.

```
/*################# mobile CSS #####################################*/

@media only screen and (min-width: 250px) and (max-width: 999px) {

}

@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */

}

/* Medium devices (desktops, 1024px and up to 1199px) */
@media (min-width: 1025px) and (max-width: 1199px) {

}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

}

/*################# END mobile CSS #################################*/
```