Get the Preplance app for a seamless learning experience. Practice offline, get daily streaks, and stay ahead with real-time interview updates.
Get it on
Google Play
4.9/5 Rating on Store
CSS · Question Set
Responsive Design & Media Queries interview questions for placements and exams.
Questions
14
Included in this set
Subject
CSS
Explore more sets
Difficulty
Mixed
Level of this set
Go through each question and its explanation. Use this set as a focused practice pack for CSS.
Use browser DevTools device mode to simulate screen sizes. Test on real devices when possible. Check key breakpoints, text readability, and touch targets. Tools like ResponsivelyApp or BrowserStack help verify behavior.
Responsive testing: Chrome DevTools → Toggle Device Toolbar
Frequent mistakes include using too many breakpoints, defining overlapping rules, using `max-width` inconsistently, not testing portrait vs landscape, and ignoring the viewport meta tag.
Avoid: @media (max-width: 768px) and (min-width: 800px) { ... }The `flex-wrap` property allows flex items to move to the next line when space runs out — crucial for responsive rows of elements like cards or buttons.
.container { display: flex; flex-wrap: wrap; }Mobile-first means designing and coding for smaller screens first, then progressively enhancing for larger screens using min-width media queries. This ensures performance, better UX, and scalability.
@media (min-width: 768px) { .grid { grid-template-columns: 1fr 1fr; } }Breakpoints are screen widths where layout adjustments occur. They are chosen based on common device widths (e.g., 480px, 768px, 1024px) and design changes like menu collapse or grid shifts.
@media (max-width: 1024px) { .sidebar { display: none; } }`vh` and `vw` scale elements according to the viewport size, making designs automatically adjust to different screen sizes without needing breakpoints. For example, hero sections often use height: 100vh.
header { height: 100vh; background-size: cover; }Use `max-width: 100%` and `height: auto` to resize images fluidly. Combine with `srcset` or `<picture>` for device-specific resolutions to reduce load time on smaller devices.
<img srcset='small.jpg 600w, large.jpg 1200w' src='large.jpg' alt='example'>
Orientation media features let you apply styles based on device orientation: `landscape` (width > height) or `portrait` (height > width).
@media (orientation: landscape) { img { height: 60vh; } }Viewport height (vh) and viewport width (vw) are relative to the visible screen size. `1vh` = 1% of viewport height; `1vw` = 1% of viewport width.
section { height: 100vh; width: 100vw; }Media queries start with `@media` followed by conditions like `(max-width: 600px)`. Inside the braces, CSS rules apply only when the condition is true.
@media (max-width: 600px) { body { font-size: 14px; } }Mobile-first design starts with base mobile styles and adds rules for larger devices using `min-width`. This ensures smaller screens load faster with fewer overrides.
@media (min-width: 768px) { .container { width: 80%; } }The 768px breakpoint typically targets tablets in portrait orientation. Other standard breakpoints include 480px (mobile) and 1024px (desktop).
@media (max-width: 768px) { nav { display: none; } }The viewport meta tag ensures the browser sets proper scaling for mobile devices. Without it, pages appear zoomed out. Example: `<meta name='viewport' content='width=device-width, initial-scale=1.0'>`
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
Using `max-width: 100%` ensures images shrink to fit container width while maintaining aspect ratio. Essential for responsive web design.
img { max-width: 100%; height: auto; }For complete preparation, combine this set with full subject-wise practice for CSS. You can also explore other subjects and sets from the links below.