CSS Media Queries Practice Questions with Solutions

Introduction

CSS Media Queries allow you to apply different CSS styles depending on conditions such as screen width, height, orientation, or device characteristics. They are an important part of responsive web design because they help websites adapt to desktops, tablets, and mobile devices. In this chapter, you’ll practice @media, min-width, max-width, orientation, and responsive layout techniques through simple solved CSS Media Queries practice questions with solutions.

Question 1: Change Background Color on Small Screens

Problem Statement

Write CSS to change the page background color to light blue when the screen width is 600px or smaller.

CSS Code

@media (max-width: 600px) {body {        background-color: lightblue;    }}

Output

When the viewport width is 600px or less, the page background becomes light blue.

Explanation

• @media creates a media query.
• max-width: 600px applies the rule when the viewport is 600px or narrower.
• The rule does not apply when the viewport is wider than 600px.

Question 2: Change Font Size on Large Screens

Problem Statement

Write CSS to set a heading’s font size to 40px when the screen width is 1000px or larger.

CSS Code

@media (min-width: 1000px) {h1 {        font-size: 40px;    }}

Output

The heading uses a 40px font size when the viewport is at least 1000px wide.

Explanation

• min-width sets the minimum viewport width required for the rule.
• The style applies at 1000px and above.
• This technique can provide larger typography on desktop screens.

Question 3: Hide an Element on Mobile

Problem Statement

Write CSS to hide a sidebar when the viewport width is 768px or smaller.

CSS Code

@media (max-width: 768px) {    .sidebar {        display: none;    }}

Output

The sidebar is hidden when the viewport width is 768px or less.

Explanation

• display: none removes the element from the rendered layout.
• The media query limits this behavior to smaller viewports.
• The sidebar remains visible above 768px.

Question 4: Create a Mobile-Friendly Navigation

Problem Statement

Write CSS to arrange navigation links vertically when the viewport width is 600px or smaller.

CSS Code

navul {    display: flex;}@media (max-width: 600px) {navul {        flex-direction: column;    }}

Output

On larger screens, the links remain in a row. On screens 600px or smaller, they appear vertically.

Explanation

• display: flex creates a flexible navigation layout.
• flex-direction: column changes the direction to vertical.
• The media query activates the mobile layout.

Question 5: Change Grid Columns Using a Media Query

Problem Statement

Write CSS to display three columns on larger screens and one column when the viewport is 600px or smaller.

CSS Code

.grid {    display: grid;    grid-template-columns: repeat(3, 1fr);}@media (max-width: 600px) {    .grid {        grid-template-columns: 1fr;    }}

Output

• Larger screens: 3 columns
• Screens 600px or smaller: 1 column

Explanation

• The default Grid layout contains three equal columns.
• The media query changes the layout to one column on smaller screens.
• This is a common pattern for responsive card layouts.

Question 6: Use min-width and max-width Together

Problem Statement

Write CSS to change a paragraph’s color to green only when the viewport width is between 600px and 900px.

CSS Code

@media (min-width: 600px) and (max-width: 900px) {p {        color: green;    }}

Output

The paragraph becomes green when the viewport width is 600px to 900px.

Explanation

• min-width: 600px sets the lower limit.
• max-width: 900px sets the upper limit.
• and requires both conditions to be true.

Question 7: Apply Styles in Landscape Orientation

Problem Statement

Write CSS to change the page background color when the device is in landscape orientation.

CSS Code

@media (orientation: landscape) {body {        background-color: lightgray;    }}

Output

The background becomes light gray when the viewport is wider than it is tall.

Explanation

• orientation: landscape targets landscape viewports.
• This is useful for adapting layouts when users rotate their devices.
• You can also target orientation: portrait.

Question 8: Apply Different Styles to Tablets

Problem Statement

Write CSS to set a container’s width to 80% when the viewport width is between 768px and 1024px.

CSS Code

@media (min-width: 768px) and (max-width: 1024px) {    .container {        width: 80%;    }}

Output

The container uses 80% width within the specified viewport range.

Explanation

• min-width establishes the lower boundary.
• max-width establishes the upper boundary.
• Combining both conditions lets you target a specific range.

Question 9: Use Multiple Media Queries

Problem Statement

Write CSS to use:

• 14px paragraph text on small screens.
• 16px on medium screens.
• 18px on large screens.

CSS Code

p {    font-size: 16px;}@media (max-width: 600px) {p {        font-size: 14px;    }}@media (min-width: 1000px) {p {        font-size: 18px;    }}

Output

Explanation

Multiple media queries can target different viewport ranges.

The default value handles the middle range, while the two media queries handle small and large screens.

Question 10: Create a Responsive Card Layout

Problem Statement

Write CSS to display cards in:

• 1 column on small screens.
• 2 columns on medium screens.
• 4 columns on large screens.

CSS Code

.cards {    display: grid;    gap: 20px;    grid-template-columns: 1fr;}@media (min-width: 600px) {    .cards {        grid-template-columns: repeat(2, 1fr);    }}@media (min-width: 1000px) {    .cards {        grid-template-columns: repeat(4, 1fr);    }}

Output

The card layout automatically adapts:

• Below 600px: 1 column
• 600px–999px: 2 columns
• 1000px and above: 4 columns

Explanation

• CSS Grid creates the card layout.
• The default layout provides one column.
• The first media query adds two columns for wider screens.
• The second media query adds four columns for large screens.
• This creates a flexible responsive layout.

Key Takeaways

• @media is used to apply CSS based on viewport conditions.
• max-width targets screens up to a specified width.
• min-width targets screens from a specified width upward.
• min-width and max-width can be combined with and.
• orientation can target portrait or landscape viewports.
• Multiple media queries can create different layouts for different screen sizes.
• Media queries work well with Flexbox and CSS Grid.
• Responsive breakpoints should be chosen according to the layout rather than relying only on device names.

Frequently Asked Questions (FAQs)

1. What is a CSS media query?

A CSS media query applies CSS rules when specific conditions are met.

Example:

@media (max-width: 600px) {body {        background-color: lightblue;    }}

2. What does max-width mean in a media query?

max-width applies the styles when the viewport is at or below the specified width.

@media (max-width: 600px) {/* CSS */}

3. What does min-width mean?

min-width applies styles when the viewport is at or above the specified width.

@media (min-width: 1000px) {/* CSS */}

4. Can I combine multiple conditions?

Yes. Use logical operators such as and.

@media (min-width: 600px) and (max-width: 900px) {/* CSS */}

5. Can media queries detect device orientation?

Yes. You can use:

@media (orientation: landscape) {/* CSS */}

You can also use orientation: portrait.

6. Can media queries be used with CSS Grid?

Yes. Media queries can change Grid columns, rows, gaps, and other layout properties according to the viewport.

7. Why are media queries important?

Media queries help create responsive websites that adapt their layouts, typography, visibility, and spacing to different viewport sizes.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Rishabh Kumar