How would you write a media query for screens smaller than 768px?

Q: How would you write a media query for screens smaller than 768px?

To target screens smaller than 768px, you can use the `max-width` property in a CSS media query. This ensures that the styles inside the query apply only when the viewport width is less than or equal to 768px — typically covering mobile devices and small tablets. For applying styles specifically to mobile or small devices. To simplify layouts, hide large elements, or reduce padding and margins on small screens. When following a desktop-first design approach (starting from large screens and adjusting downward). /* Apply styles for screens up to 768px wide */ @media (max-width: 768px) { body { font-size: 0.9rem; padding: 1rem; } .sidebar { display: none; /* Hide sidebar on small screens */ } } In this example, the styles apply only when the screen width is 768px or smaller. The text size and padding are reduced, and the sidebar is hidden to optimize the layout for mobile users.

Difficulty: 2/10

media queries, responsive breakpoints, CSS syntax

Writing Media Queries for Small Screens in CSS

To target screens smaller than 768px, you can use the max-width property in a CSS media query. This ensures that the styles inside the query apply only when the viewport width is less than or equal to 768px — typically covering mobile devices and small tablets.

When to Use max-width Media Queries

1
For applying styles specifically to mobile or small devices.
2
To simplify layouts, hide large elements, or reduce padding and margins on small screens.
3
When following a desktop-first design approach (starting from large screens and adjusting downward).

Example: CSS Media Query for Screens Smaller Than 768px

In this example, the styles apply only when the screen width is 768px or smaller. The text size and padding are reduced, and the sidebar is hidden to optimize the layout for mobile users.

Scenario Questions

0-2 years experience

2-5 years experience

1You're adding a new card component that should display in a two‑column layout on tablets but collapse to one column on smaller screens. Walk me through the media query you’d write and any ordering considerations.

Follow-up Questions