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.

Difficulty: 2/10

Topics: media queries, responsive breakpoints, CSS syntax

Scenario Questions

0-2 years experience

1
We have a simple landing page and need the navigation to stack vertically on phones. How would you write a media query to target screens smaller than 768px?
2
If you add a media query with max-width:768px but the styles aren't applying, what are common reasons?

2-5 years experience

1
You'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.
2
During QA you notice that on a device with a 767px width the layout still looks like the desktop version. How would you debug the media query and what could be causing the breakage?

5-8 years experience

1
Our design system defines breakpoints globally. How would you structure media queries for <768px across many components to avoid duplication and ensure maintainability?
2
We need to support high‑density displays and also serve different image assets based on viewport width. How would you integrate media queries with srcset or picture elements while keeping the <768px rule efficient?

8+ years experience

1
The product is migrating from a legacy CSS codebase that uses fixed pixel breakpoints to a fluid, design‑token‑driven system. How would you approach refactoring all existing max-width:768px queries to align with the new system without breaking existing pages?
2
Across multiple teams you have inconsistent breakpoint definitions. How would you establish a company‑wide strategy for breakpoints like <768px, and what governance or tooling would you put in place to enforce it?

Follow-up Questions

❓What happens if you use min-width instead?
❓How would you combine this with a desktop layout rule?
❓Can you explain why you chose max-width:767px versus 768px?