How do media queries work for mobile layouts?

CSS

The short answer

Media queries let you apply different CSS styles based on the screen size, orientation, or other characteristics. For mobile layouts, you use min-width or max-width conditions to change the layout at specific breakpoints. The viewport meta tag is required for media queries to work correctly on mobile devices.

The viewport meta tag

Without this tag, mobile browsers render the page at desktop width and zoom out:

<meta
  name="viewport"
  content="width=device-width, initial-scale=1"
/>

This tells the browser to match the viewport width to the device width. Always include this tag.

Basic media queries

/* Mobile-first base styles */
.grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Tablet: 768px and up */
@media (min-width: 768px) {
  .grid {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .grid > * {
    flex: 0 0 calc(50% - 8px);
  }
}
/* Desktop: 1024px and up */
@media (min-width: 1024px) {
  .grid > * {
    flex: 0 0 calc(33.33% - 11px);
  }
}

On mobile, items stack vertically. On tablet, they go two per row. On desktop, three per row.

Common patterns

Hiding/showing elements:

.mobile-menu {
  display: block;
}
.desktop-nav {
  display: none;
}
@media (min-width: 768px) {
  .mobile-menu {
    display: none;
  }
  .desktop-nav {
    display: flex;
  }
}

Changing typography:

h1 {
  font-size: 1.5rem;
}
@media (min-width: 768px) {
  h1 {
    font-size: 2rem;
  }
}
@media (min-width: 1024px) {
  h1 {
    font-size: 2.5rem;
  }
}

Sidebar layout:

.page {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .page {
    flex-direction: row;
  }
  .sidebar {
    width: 250px;
    flex-shrink: 0;
  }
  .main {
    flex: 1;
  }
}

Modern alternatives to media queries

CSS Grid can handle some responsive layouts without media queries:

.grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(300px, 1fr)
  );
  gap: 24px;
}

Container queries let you style based on the parent's size instead of the viewport:

.card-container {
  container-type: inline-size;
}
@container (min-width: 400px) {
  .card {
    flex-direction: row;
  }
}

Interview Tip

Show a mobile-first example using min-width breakpoints. Mention the viewport meta tag — forgetting it is a common mistake. If you can mention container queries as a modern alternative, that shows you are up to date with CSS evolution.

Why interviewers ask this

Media queries are fundamental to responsive design. Interviewers want to see if you can build layouts that work across different screen sizes and if you follow mobile-first best practices.

Table of Contents