Media Query Basics

Media Queries

Media queries apply CSS conditionally based on viewport width, orientation, or other device features.

Example

.container { width: 100%; padding: 1rem; }
@media (min-width: 768px)  { .container { max-width: 720px;  margin: 0 auto; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media print { nav, aside { display: none; } }

CSS

Full Editor

Pro Tip

Use min-width (mobile-first) rather than max-width for cleaner, additive styles.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned