Practice Questions — Responsive Design and Media Queries
← Back to NotesTopic-Specific Questions
Question 1
Easy
What is responsive web design?
Think about different screen sizes.
Building one website that looks good and works well on all screen sizes — phones, tablets, laptops, and desktops — without needing separate sites for each.
Question 2
Easy
Which HTML tag is MANDATORY for responsive design to work on mobile?
Goes in the head.
<meta name="viewport" content="width=device-width, initial-scale=1">Question 3
Easy
What does this media query mean?
@media (min-width: 768px) {
.sidebar { display: block; }
}min-width means 'at least this wide'.
The sidebar displays as a block ONLY when the viewport is 768px wide or more.
Question 4
Easy
What is the difference between
min-width and max-width in media queries?One is a floor; the other is a ceiling.
min-width applies styles when the viewport is that wide OR WIDER. max-width applies when the viewport is that wide OR NARROWER.Question 5
Easy
What does
1rem mean?rem = root em.
1 times the font-size of the root (html) element, which is 16px by default.
Question 6
Easy
What does
100vw mean?vw = viewport width.
100 percent of the viewport width — the full width of the browser window.
Question 7
Medium
What does this do?
img {
max-width: 100%;
height: auto;
}Fluid images.
Makes every image never exceed the width of its container, and automatically adjusts the height to keep the aspect ratio correct.
Question 8
Medium
What is wrong with this mobile-first CSS?
@media (min-width: 1024px) {
.grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 768px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}Which rule wins on desktop?
The order is wrong. On a 1200px screen, BOTH rules match, but the 2-column rule comes LAST and wins. The grid shows 2 columns instead of 4.
Question 9
Medium
What does
clamp(1rem, 3vw, 2rem) do?clamp(min, preferred, max).
The value is 3% of viewport width, clamped to never go below 1rem or above 2rem.
Question 10
Medium
What media query targets only phones held vertically?
Orientation + max-width.
@media (max-width: 640px) and (orientation: portrait) { ... }Question 11
Medium
Why is mobile-first preferred over desktop-first?
Think about complexity and performance.
Mobile-first forces you to start with the essential content and layout, then ENHANCE for larger screens. It usually produces simpler CSS, loads faster on mobile (where it matters most), and matches how users actually access the web today.
Question 12
Medium
What are common breakpoints in responsive design?
640, 768, 1024, 1280.
640px (phablet), 768px (tablet), 1024px (small laptop or tablet landscape), 1280px (standard desktop), and sometimes 1536px (large desktop).
Question 13
Hard
Why does
width: 100vw sometimes cause horizontal scrolling?Scrollbar width.
100vw includes the vertical scrollbar width. If the page has a scrollbar, 100vw is wider than the actual visible area, causing a horizontal scroll.Question 14
Hard
What is the difference between
em and rem?Think about what each is relative to.
em is relative to the PARENT element's font-size (can compound when nested). rem is relative to the ROOT (html) element's font-size, so it is always predictable.Question 15
Hard
What does
@media (prefers-color-scheme: dark) detect?Operating system setting.
It detects whether the user's operating system is set to dark mode. If so, the CSS inside the query applies automatically.
Mixed & Application Questions
Question 1
Easy
What is
@media print used for?Printing.
It applies CSS only when the page is being printed (or print-previewed).
Question 2
Easy
What unit is best for font-sizes in responsive design?
Scales with root element.
rem (or clamp() for fluid typography)Question 3
Medium
Why should you use
max-width instead of width for containers?Think about narrow screens.
max-width caps the container's width but lets it shrink on smaller screens. width forces an exact size, which causes overflow and horizontal scroll on narrow viewports.Question 4
Medium
What does this media query mean?
@media (min-width: 768px) and (max-width: 1023px)Two conditions with 'and'.
Applies ONLY when the viewport is between 768px and 1023px wide (typical tablet range).
Question 5
Medium
What does
vmin mean?Minimum of vw and vh.
1 percent of the SMALLER of the viewport's width or height.
Question 6
Medium
What does this do?
@media (max-width: 640px) {
.desktop-only { display: none; }
}Hiding elements.
Hides elements with the class 'desktop-only' on screens 640px wide or less.
Question 7
Medium
How would you make a three-column desktop layout become a single-column mobile layout?
Media query with grid-template-columns.
Start with
grid-template-columns: 1fr as the base (mobile) style, then use @media (min-width: 768px) { .grid { grid-template-columns: repeat(3, 1fr); } } to expand to 3 columns on tablets and up.Question 8
Medium
What does
initial-scale=1 in the viewport meta tag do?Initial zoom level.
Sets the initial zoom level to 1 (100%) when the page first loads, so nothing is zoomed in or out.
Question 9
Hard
Can you use CSS variables inside media queries?
Yes, and they redefine based on the query.
Yes. You can redefine CSS variables inside a media query, and every element using
var(--name) updates automatically at that breakpoint.Question 10
Hard
What is the difference between
display: none and visibility: hidden?One removes from layout; the other just hides.
display: none removes the element from the layout entirely (takes no space). visibility: hidden keeps the element in the layout but makes it invisible.Question 11
Easy
What does
ch unit represent?Character width.
1
ch is the width of the '0' character in the current font. Useful for setting line widths based on readable character count (like max-width: 60ch).Question 12
Medium
Which is more accessible for font sizes: px or rem?
Think about user zoom.
rem is more accessible because it respects the user's browser font-size preferences. Users with visual impairments often increase default font-size; rem scales with that, px does not.Question 13
Medium
What is the 'mobile-first' mindset in design?
Essentials first.
Designing for the smallest screen first, focusing on essential content and interactions, then progressively enhancing for larger screens. It forces you to prioritize what matters most.
Question 14
Hard
What is the problem with targeting specific devices like
@media (max-width: 480px) (iPhone width)?Device sizes change over time.
Device sizes change every year, and there are hundreds of phone sizes. Targeting specific devices creates brittle code. Instead, pick breakpoints where YOUR layout actually needs to change.
Question 15
Hard
What does
@media (hover: hover) detect?Can the device hover?
It detects whether the user's device supports hover interactions (mouse or trackpad). Touch devices typically return 'none'.
Question 16
Easy
Which media query detects dark mode preference?
prefers- something.
@media (prefers-color-scheme: dark)Question 17
Easy
What does
@media (prefers-reduced-motion: reduce) detect?Accessibility for motion-sensitive users.
It detects whether the user has asked their OS to reduce motion (for accessibility reasons such as motion sickness). Use it to disable animations.
Question 18
Medium
What does
max-width: 65ch do on a paragraph?ch is character-width.
It limits the paragraph to a maximum width of about 65 characters, which is the ideal readable line length.
Question 19
Hard
What is the 'mobile tap zoom' problem and how does the viewport meta tag fix it?
Tapping input fields.
On iOS, tapping an input with font-size under 16px zooms in automatically. Using
initial-scale=1 and setting inputs to at least 16px prevents this. Some developers use maximum-scale=1 but that harms accessibility — avoid it.Multiple Choice Questions
MCQ 1
Which meta tag is required for responsive design on mobile?
Answer: B
B is correct. The viewport meta tag tells mobile browsers to use the actual device width instead of rendering at desktop size and scaling down.
B is correct. The viewport meta tag tells mobile browsers to use the actual device width instead of rendering at desktop size and scaling down.
MCQ 2
What does
@media (min-width: 768px) mean?Answer: B
B is correct.
B is correct.
min-width is a MINIMUM — the styles apply at that width and above.MCQ 3
What is the best unit for font-sizes in responsive design?
Answer: C
C is correct. rem scales with the root font-size and respects user browser zoom settings, making it the most accessible choice.
C is correct. rem scales with the root font-size and respects user browser zoom settings, making it the most accessible choice.
MCQ 4
How do you make an image fit inside its container?
Answer: B
B is correct.
B is correct.
max-width: 100% caps the image at the parent's width; height: auto keeps the aspect ratio.MCQ 5
What does
100vh represent?Answer: B
B is correct.
B is correct.
vh is viewport height. 100vh is the full browser window height.MCQ 6
What is the difference between mobile-first and desktop-first?
Answer: B
B is correct. Mobile-first writes base styles for mobile and progressively enhances with
B is correct. Mobile-first writes base styles for mobile and progressively enhances with
min-width queries. Desktop-first does the opposite using max-width.MCQ 7
What is
clamp(1rem, 4vw, 3rem)?Answer: B
B is correct.
B is correct.
clamp(min, preferred, max) clamps the preferred value between the min and max bounds. Perfect for fluid typography.MCQ 8
Which CSS unit is relative to the PARENT element's font-size (and can compound when nested)?
Answer: C
C is correct.
C is correct.
em is relative to the parent. Nested em values compound (2em inside 2em = 4x the grandparent size). rem avoids this by always referencing the root.MCQ 9
What does this do?
@media (max-width: 640px) { .sidebar { display: none; } }Answer: B
B is correct.
B is correct.
max-width: 640px matches viewports up to 640px. Inside, the sidebar is hidden on small screens.MCQ 10
Why use
max-width instead of width for containers?Answer: B
B is correct.
B is correct.
max-width: 1200px means 'up to 1200px but shrink if needed'. width: 1200px forces 1200px and causes overflow on narrow screens.MCQ 11
Which media query detects dark mode preference from the OS?
Answer: C
C is correct.
C is correct.
prefers-color-scheme reads the user's OS theme setting. Values are light or dark.MCQ 12
In mobile-first CSS, how should you order min-width media queries?
Answer: B
B is correct. With min-width queries, order from smallest to largest. Later rules override earlier ones, so the largest breakpoint wins on desktop.
B is correct. With min-width queries, order from smallest to largest. Later rules override earlier ones, so the largest breakpoint wins on desktop.
MCQ 13
Which unit is 1 percent of the viewport width?
Answer: B
B is correct.
B is correct.
vw is viewport width. 1vw = 1 percent of viewport width. 1vh = 1 percent of viewport height.MCQ 14
What is the minimum viable responsive CSS for an image?
Answer: C
C is correct.
C is correct.
max-width: 100% prevents overflow, and height: auto preserves aspect ratio. Add this to every responsive site.MCQ 15
Why does
width: 100vw sometimes create a horizontal scroll?Answer: B
B is correct.
B is correct.
100vw is the full viewport including the scrollbar. If a scrollbar exists, 100vw is wider than the visible area. Use 100% (relative to parent) to avoid this.MCQ 16
What is a 'breakpoint' in responsive design?
Answer: B
B is correct. A breakpoint is a viewport width where your CSS changes the layout — typically done with a media query.
B is correct. A breakpoint is a viewport width where your CSS changes the layout — typically done with a media query.
MCQ 17
How do you combine two conditions in a media query?
Answer: B
B is correct. Use
B is correct. Use
and for both conditions to be true. Use a comma for 'or' (either condition).MCQ 18
Which unit is 1 percent of the SMALLER viewport dimension?
Answer: C
C is correct.
C is correct.
vmin uses the smaller of viewport width and height. vmax uses the larger. Handy for keeping elements visible in any orientation.MCQ 19
What happens without the viewport meta tag on a mobile browser?
Answer: B
B is correct. Without the viewport meta tag, mobile browsers assume a desktop width and shrink the page. Text becomes unreadable and responsive styles break.
B is correct. Without the viewport meta tag, mobile browsers assume a desktop width and shrink the page. Text becomes unreadable and responsive styles break.
MCQ 20
Which is BEST for building a responsive card grid WITHOUT any media queries?
Answer: C
C is correct.
C is correct.
repeat(auto-fit, minmax(250px, 1fr)) creates a grid that adds or removes columns based on container width — a fully responsive layout with zero media queries.Coding Challenges
Challenge 1: Add the Viewport Meta Tag
EasyCreate a basic HTML page with the viewport meta tag, a heading, and a paragraph. The page should display correctly on mobile devices (without scaling down).
Sample Input
None
Sample Output
A simple page that looks correct on phones.
Must include the viewport meta tag. Use a readable font size.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Starter</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; font-size: 1rem; line-height: 1.6; color: #0f172a; }
h1 { color: #a855f7; }
</style>
</head>
<body>
<h1>Hello from Priya</h1>
<p>This is my first responsive page. It works on every screen size.</p>
</body>
</html>Challenge 2: Responsive 1-2-4 Card Grid
EasyBuild a grid of 8 cards that shows 1 column on mobile, 2 columns on tablet (640px+), and 4 columns on desktop (1024px+). Use mobile-first media queries. Give each card a name of a student and a different gradient background.
Sample Input
None
Sample Output
8 colored cards that rearrange from 1 column to 4 columns as screen widens.
Use mobile-first. Use grid-template-columns and media queries. No JavaScript.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { font-family: Arial, sans-serif; background: #0f172a; padding: 20px; margin: 0; color: white; }
.grid { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 1200px; margin: 0 auto; }
.card { padding: 24px; border-radius: 12px; font-weight: bold; }
.c1 { background: linear-gradient(135deg, #a855f7, #ec4899); }
.c2 { background: linear-gradient(135deg, #06b6d4, #0ea5e9); }
.c3 { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.c4 { background: linear-gradient(135deg, #10b981, #06b6d4); }
.c5 { background: linear-gradient(135deg, #8b5cf6, #3b82f6); }
.c6 { background: linear-gradient(135deg, #ec4899, #f59e0b); }
.c7 { background: linear-gradient(135deg, #f43f5e, #8b5cf6); }
.c8 { background: linear-gradient(135deg, #14b8a6, #84cc16); }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(4, 1fr); } }
</style>
</head>
<body>
<div class="grid">
<div class="card c1">Aarav</div>
<div class="card c2">Priya</div>
<div class="card c3">Rohan</div>
<div class="card c4">Ishita</div>
<div class="card c5">Vivaan</div>
<div class="card c6">Anika</div>
<div class="card c7">Kabir</div>
<div class="card c8">Meera</div>
</div>
</body>
</html>Challenge 3: Responsive Navbar with Hamburger
MediumBuild a navbar that shows all links horizontally on desktop. On screens 640px or smaller, the links should hide behind a hamburger button. Clicking the button toggles the menu.
Sample Input
Click hamburger on mobile
Sample Output
Menu appears as a vertical list below the navbar.
Use a media query at 640px. Use classList.toggle in JavaScript.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, sans-serif; }
nav { background: #0f172a; color: white; padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; position: relative; }
nav .logo { font-size: 22px; font-weight: bold; color: #a855f7; }
nav ul { list-style: none; display: flex; gap: 28px; }
nav ul li a { color: white; text-decoration: none; }
.hamburger { display: none; background: none; border: none; color: white; font-size: 28px; cursor: pointer; }
@media (max-width: 640px) {
.hamburger { display: block; }
nav ul { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: #1e293b; padding: 20px; display: none; }
nav ul.open { display: flex; }
}
</style>
</head>
<body>
<nav>
<div class="logo">SkyBlog</div>
<button class="hamburger" id="ham">☰</button>
<ul id="menu"><li><a href="#">Home</a></li><li><a href="#">Articles</a></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li></ul>
</nav>
<script>
document.getElementById('ham').addEventListener('click', function() {
document.getElementById('menu').classList.toggle('open');
});
</script>
</body>
</html>Challenge 4: Fluid Typography with clamp()
MediumCreate a hero section with a heading that uses
clamp() for fluid scaling. The heading should be between 2rem minimum and 5rem maximum, with 8vw as the preferred value. Resizing the browser should smoothly scale the heading.Sample Input
Resize browser
Sample Output
Heading smoothly scales between 2rem and 5rem as viewport changes.
Use clamp(). No media queries. Use a gradient text effect.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { font-family: Arial, sans-serif; background: #0f172a; color: white; margin: 0; padding: 60px 20px; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }
h1 { font-size: clamp(2rem, 8vw, 5rem); background: linear-gradient(90deg, #a855f7, #06b6d4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-align: center; margin-bottom: 20px; }
p { font-size: clamp(1rem, 2.5vw, 1.3rem); color: #cbd5e1; max-width: 60ch; text-align: center; line-height: 1.6; }
</style>
</head>
<body>
<h1>Modern Age Coders</h1>
<p>Resize this page. Watch the heading scale smoothly without a single media query. This is fluid typography powered by clamp().</p>
</body>
</html>Challenge 5: Automatic Dark Mode with prefers-color-scheme
HardBuild a page that automatically switches between light and dark mode based on the user's OS setting. Use CSS variables for colors. Include a card with some text. Changing the OS theme should automatically update the page.
Sample Input
Change OS theme to dark
Sample Output
Page immediately switches to dark colors without any button click.
Use CSS variables. Use @media (prefers-color-scheme: dark). No JavaScript.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
:root { --bg: #ffffff; --text: #0f172a; --card: #f8fafc; --border: #e5e7eb; --primary: #a855f7; }
@media (prefers-color-scheme: dark) {
:root { --bg: #0f172a; --text: #f1f5f9; --card: #1e293b; --border: #334155; --primary: #a855f7; }
}
body { background: var(--bg); color: var(--text); font-family: Arial, sans-serif; padding: 30px 20px; margin: 0; transition: background 0.3s, color 0.3s; }
.container { max-width: 600px; margin: 0 auto; }
.card { background: var(--card); border: 1px solid var(--border); padding: 24px; border-radius: 12px; }
h1 { color: var(--primary); }
</style>
</head>
<body>
<div class="container">
<h1>Hi, I am Kavya</h1>
<div class="card">
<h3>About this page</h3>
<p>This page automatically matches your operating system theme. Try switching between light and dark mode in your OS settings.</p>
</div>
</div>
</body>
</html>Challenge 6: Full Responsive Landing Page
HardBuild a landing page with a header, hero section (two columns on desktop, stacked on mobile), three feature cards (1 column mobile, 3 columns desktop), and a footer. Use mobile-first CSS and at least two media queries.
Sample Input
View on mobile and desktop
Sample Output
Stacked layout on mobile; side-by-side and 3-column grid on desktop.
Mobile-first. Viewport meta tag required. Images should use max-width: 100%.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, sans-serif; background: #0f172a; color: #f1f5f9; }
header { padding: 20px; background: #1e293b; text-align: center; }
header h1 { color: #a855f7; }
.hero { padding: 40px 20px; display: flex; flex-direction: column; gap: 30px; max-width: 1100px; margin: 0 auto; align-items: center; }
.hero-text h2 { font-size: clamp(1.8rem, 5vw, 3rem); margin-bottom: 16px; }
.hero-text p { color: #cbd5e1; margin-bottom: 20px; line-height: 1.6; }
.hero-visual { width: 100%; max-width: 400px; aspect-ratio: 1; border-radius: 20px; background: linear-gradient(135deg, #7c3aed, #ec4899); }
.btn { display: inline-block; padding: 12px 24px; background: #a855f7; color: white; border-radius: 8px; text-decoration: none; }
.features { padding: 40px 20px; max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 20px; }
.feature { background: #1e293b; padding: 24px; border-radius: 12px; }
.feature h3 { color: #06b6d4; margin-bottom: 8px; }
footer { padding: 20px; background: #1e293b; text-align: center; color: #94a3b8; }
@media (min-width: 768px) {
.hero { flex-direction: row; padding: 60px 30px; }
.hero-text { flex: 1; }
}
@media (min-width: 1024px) {
.features { grid-template-columns: repeat(3, 1fr); }
}
</style>
</head>
<body>
<header><h1>SkyLearn</h1></header>
<section class="hero">
<div class="hero-text">
<h2>Coding for the Next Generation</h2>
<p>Join Aarav, Priya, and 10,000 other young coders learning to build real projects.</p>
<a href="#" class="btn">Start Free Trial</a>
</div>
<div class="hero-visual"></div>
</section>
<section class="features">
<div class="feature"><h3>Live Classes</h3><p>Real instructors, real code, real time.</p></div>
<div class="feature"><h3>Projects</h3><p>Build games, apps, and websites.</p></div>
<div class="feature"><h3>Community</h3><p>Collaborate with peers across India.</p></div>
</section>
<footer>© 2026 SkyLearn</footer>
</body>
</html>Need to Review the Concepts?
Go back to the detailed notes for this chapter.
Read Chapter NotesWant to learn web development with a live mentor?
Explore our Frontend Masterclass