Media Queries — CSS Technical Interview Questions & Answers

Applying CSS conditionally by viewport/device.

Media Queries

  • Media Queries (css adv query) is a CSS topic. In plain words you use it for stack cards on phone in mobile view. Don’t start with a slogan — start with that picture.
  • Smallest example: @media (max-width: 640px). Type it, run it, and say what you see. If you can do that from memory, you know Media Queries (css adv query).
  • From the example next to this theory: Applying CSS conditionally by viewport/device.
  • Trap: desktop-only CSS. Fix that before you talk about advanced CSS.
  • Viva: what is Media Queries (css adv query)? Then show @media (max-width: 640px). Then name the trap.

Technical Interview Tip: What is Media Queries (css adv query)? Show this: @media (max-width: 640px). Trap: desktop-only CSS.

Code Examples for Media Queries

Media Queries — working example

/* Mobile-first base */
.hero { font-size: 1.35rem; }
.sidebar { display: none; }

@media (min-width: 768px) {
  .hero { font-size: 2rem; }
  .sidebar { display: block; }
}

@media print {
  .sidebar,
  .no-print {
    display: none;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }
}

Media queries adapt layout/type; mobile-first uses min-width enhancements.

How to Explain Media Queries to an Interviewer

What is Media Queries (css adv query)?

Used for stack cards on phone mobile view Not just the heading

Give one small example of Media Queries (css adv query).

@media (max-width: 640px) Applying CSS conditionally by viewport/device

What mistake do beginners make with Media Queries (css adv query)?

desktop-only CSS Show the fix

Where do you use Media Queries (css adv query)?

mobile view stack cards on phone