Questions
27 of 33
1What is a breakpoint in CSS? Why are breakpoints used in responsive web design?
2What is the syntax for setting a breakpoint using a media query?
3What is the syntax for setting a breakpoint using a media query?
4What units are typically used for defining breakpoints (e.g., px, em, rem)?
5What happens if no breakpoints are defined in a responsive layout?
6How do breakpoints help in mobile-first design?
7How does CSS decide which breakpoint to apply when multiple match?
8What’s the difference between min-width and max-width in media queries?
9How can you create a layout that adjusts between two breakpoints?
10What is the difference between device-based breakpoints and content-based breakpoints?
11What is the role of the viewport meta tag in responsive design?
12How do breakpoints help in mobile-first design?
13How does CSS decide which breakpoint to apply when multiple match?
14What’s the difference between min-width and max-width in media queries?
15What is the difference between device-based breakpoints and content-based breakpoints?
16What is the role of the viewport meta tag in responsive design?
17What is the difference between using em and px in defining breakpoints?
18How do you handle overlapping or conflicting breakpoint rules?
19Can breakpoints be combined with CSS Grid or Flexbox?
20How do CSS container queries differ from traditional breakpoints?
21How can you implement responsive typography using breakpoints?
22How can you use logical operators (and, not, only) in media queries?
23How does pixel density (device-pixel-ratio) affect breakpoints?
24What is the difference between min-device-width and min-width?
25How do you use breakpoints in frameworks like Bootstrap or Tailwind CSS?
26How would you write a media query for screens smaller than 768px?
27How would you create a responsive navigation bar using breakpoints?
28How would you handle images that need to resize at specific breakpoints? How can you make font sizes scale smoothly between two breakpoints?
29How would you debug a layout that looks broken at a specific breakpoint?
30How would you optimize breakpoints for tablets vs. phones?
31How can you prevent layout jumps between breakpoints?
32How do you use CSS custom properties (variables) with breakpoints?
33How do breakpoints differ between desktop, tablet, and mobile-first strategies?
CSSCSS
Basics
Selectors
Box model
Text formatters
Positioning
Pseudo classes
Pseudo elements
Flexbox
Grid
Display
Combinators
Overflow
Breakpoint
Transformation and Transition
Frameworks
Everything else
27 / 33

How would you create a responsive navigation bar using breakpoints?

Difficulty: 5/10
media queries, flexbox layout, responsive design

Creating a Responsive Navigation Bar with CSS Breakpoints

A responsive navigation bar adapts its layout based on screen size, ensuring usability across devices. CSS breakpoints let you change the navbar’s design — such as stacking links vertically or showing a hamburger menu — for smaller screens.

Steps to Create a Responsive Navigation Bar
  1. 1

    Design a horizontal navigation layout for larger screens.

  2. 2

    Use a media query with max-width (e.g., 768px) to modify the layout for smaller screens.

  3. 3

    Hide or collapse the menu links and display a menu icon on mobile devices.

  4. 4

    Toggle the menu’s visibility when the icon is clicked using CSS or JavaScript.

Example: Responsive Navigation Bar with Breakpoints

In this example, the navigation links display in a horizontal row for desktop screens. When the screen width is below 768px, the links are hidden and replaced with a menu icon. On click (via a small JavaScript toggle), the navigation menu becomes visible again — providing a user-friendly mobile experience.

Scenario Questions

0-2 years experience

  1. 1Can you walk me through how you'd build a simple navigation bar that collapses into a hamburger menu at 768px using only CSS?
  2. 2If you set a media query at max-width: 600px but the menu still appears horizontal, what might be wrong in your CSS?

2-5 years experience

  1. 1Suppose the design changes and now the nav should show three columns on tablets (width 768‑1024px) and a single column on mobile. How would you adjust your breakpoints and layout, and what trade‑offs would you consider?
  2. 2You notice that on some browsers the dropdown menu flickers when resizing the window. How would you debug and fix this issue?

5-8 years experience

  1. 1When scaling this navigation component across multiple products, how would you structure the CSS (e.g., BEM, CSS modules, design tokens) to keep breakpoints consistent and avoid specificity wars?
  2. 2If the navigation bar needs to support high‑contrast mode and dynamic theming while remaining responsive, what architectural changes would you make to the CSS and component hierarchy?

8+ years experience

  1. 1Our company is migrating from a legacy CSS codebase to a CSS‑in‑JS solution across dozens of services. How would you plan the migration of a responsive navigation bar, ensuring breakpoints stay in sync and performance isn’t degraded?
  2. 2Imagine you need to expose the navigation bar as a reusable component library used by multiple teams with different branding requirements. How would you design the breakpoint system and theming API to accommodate future extensions without breaking existing implementations?

Follow-up Questions

  • How would you verify that the navigation works on both touch and pointer devices?
  • What accessibility considerations do you keep in mind when hiding menu items behind a hamburger button?
  • If JavaScript were unavailable, how would you ensure the menu remains usable?
Share

Share via WhatsApp, X, Facebook, LinkedIn or copy link. Open Graph preview enabled.