CSS Media Queries

What are Media Queries?

Media queries allow you to apply styles based on screen size or device conditions.

They are used to make websites responsive across phones, tablets, and desktops.

Output:

Breakpoints define where your layout changes for different screen sizes.

Applies styles when the screen width is less than or equal to a value.

Output:

Applies styles when the screen width is greater than or equal to a value.

Output:

Start with styles for small screens, then scale up using min-width.

Output:

Output:

You can combine conditions using and.

Output:

Output:

Create a layout that changes from 1 column to 2 columns to 3 columns using media queries.

Output:

Ask the AI if you need help understanding or want to dive deeper in any topic