How to Set Breakpoint for Tablet in CSS | Simple Guide

To set a breakpoint for tablets in CSS, use a @media query targeting typical tablet screen widths, such as between 600px and 900px. For example, @media (min-width: 600px) and (max-width: 900px) { /* styles here */ } applies styles only on tablet-sized screens.

Syntax

The CSS breakpoint for tablets is set using the @media rule with conditions on the viewport width. You specify a minimum and maximum width to target tablet screen sizes.

• @media: starts the media query.
• (min-width: 600px): applies styles when the screen is at least 600 pixels wide.
• (max-width: 900px): applies styles when the screen is at most 900 pixels wide.
• Styles inside the curly braces { } apply only when both conditions are true.

css

@media (min-width: 600px) and (max-width: 900px) {
  /* CSS styles for tablets go here */
}

Example

This example changes the background color and font size only on tablet screens between 600px and 900px wide.

css

body {
  background-color: white;
  font-size: 1rem;
}

@media (min-width: 600px) and (max-width: 900px) {
  body {
    background-color: lightblue;
    font-size: 1.2rem;
  }
}

Output

The page background is white on small and large screens. On tablet-sized screens (600px to 900px wide), the background changes to light blue and the text becomes slightly larger.

Common Pitfalls

Common mistakes when setting tablet breakpoints include:

• Using only max-width or min-width without combining both, which can cause styles to apply outside tablet sizes.
• Choosing breakpoints that don't match actual device widths, causing unexpected layouts.
• Not testing on real devices or browser resizing tools.

Always test your breakpoints to ensure they cover the intended tablet range.

css

@media (max-width: 900px) {
  /* This applies to all devices smaller than 900px, including phones */
}

/* Correct way: */
@media (min-width: 600px) and (max-width: 900px) {
  /* Applies only to tablets */
}

Quick Reference

Breakpoint Type	Min Width	Max Width	Description
Phone	0px	599px	Small screens, mostly phones
Tablet	600px	900px	Medium screens, typical tablets
Desktop	901px	∞	Large screens, desktops and laptops

Key Takeaways

Use @media with both min-width and max-width to target tablet screen sizes precisely.

Typical tablet breakpoints range from 600px to 900px wide.

Test your breakpoints on real devices or browser tools to ensure correct behavior.

Avoid using only max-width or min-width alone for tablet breakpoints.

Keep your CSS organized by grouping tablet-specific styles inside the media query.