CSS Responsive Design Practice Questions with Solutions

By /

Introduction

CSS Responsive Design is a web design approach that makes websites look and function well on desktops, laptops, tablets, and mobile phones. By using media queries, flexible layouts, relative units, and responsive images, developers can create websites that automatically adapt to different screen sizes. Responsive design improves user experience, accessibility, and SEO because search engines prioritize mobile-friendly websites. In this chapter, you’ll practice responsive design through simple solved questions that are easy for beginners to understand. CSS Responsive Design practice questions with solutions help to build concepts.

Question 1: Apply Styles for Mobile Devices

Problem Statement

Write CSS to change the page background color to light gray on screens that are 600px wide or smaller.

CSS Code

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

Output

The page background changes to light gray on mobile devices with a screen width of 600px or less.

Explanation

  • @media creates a media query.
  • max-width: 600px targets smaller screens.
  • The styles inside the media query are applied only when the condition is true.

Question 2: Hide an Element on Small Screens

Problem Statement

Write CSS to hide a sidebar on screens that are 768px wide or smaller.

CSS Code

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

Output

The sidebar is hidden on tablets and mobile devices.

Explanation

  • display: none; removes the element from the layout.
  • This helps create a cleaner interface on smaller screens.
  • Sidebars are often hidden on mobile devices.

Question 3: Change Font Size for Mobile

Problem Statement

Write CSS to reduce the heading font size to 24px on small screens.

CSS Code

@media (max-width: 600px) {h1 {        font-size: 24px;    }}

Output

The heading appears smaller on mobile devices.

Explanation

  • Smaller fonts improve readability on narrow screens.
  • The media query applies only to devices that meet the width condition.
  • Responsive typography improves user experience.

Question 4: Display Flex Items Vertically

Problem Statement

Write CSS to change a horizontal Flexbox layout into a vertical layout on mobile devices.

CSS Code

@media (max-width: 768px) {    .container {        flex-direction: column;    }}

Output

The flex items are displayed one below another on smaller screens.

Explanation

  • flex-direction: column; stacks items vertically.
  • This creates a mobile-friendly layout.
  • The layout changes automatically based on screen width.

Question 5: Make an Image Responsive

Problem Statement

Write CSS to ensure an image scales automatically to fit its container.

CSS Code

img {    max-width: 100%;    height: auto;}

Output

The image automatically resizes without losing its aspect ratio.

Explanation

  • max-width: 100%; prevents the image from overflowing its container.
  • height: auto; maintains the original aspect ratio.
  • This is a standard technique for responsive images.

Question 6: Create Two Columns on Large Screens

Problem Statement

Write CSS to display two equal columns on screens that are 768px wide or larger.

CSS Code

@media (min-width: 768px) {    .container {        display: grid;        grid-template-columns: 1fr1fr;    }}

Output

The layout displays two equal columns on tablets and desktop screens.

Explanation

  • min-width: 768px targets medium and larger screens.
  • display: grid; creates a Grid container.
  • 1fr 1fr creates two equal-width columns.

Question 7: Change Navigation Layout on Mobile

Problem Statement

Write CSS to display navigation links vertically on screens that are 600px wide or smaller.

CSS Code

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

Output

The navigation links appear one below another on mobile devices.

Explanation

  • flex-direction: column; stacks the navigation items vertically.
  • Vertical menus are easier to use on small screens.
  • This improves mobile navigation.

Question 8: Adjust Grid Columns for Small Screens

Problem Statement

Write CSS to display only one column on screens that are 600px wide or smaller.

CSS Code

@media (max-width: 600px) {    .grid-container {        grid-template-columns: 1fr;    }}

Output

All grid items are displayed in a single column.

Explanation

  • 1fr creates one full-width column.
  • Single-column layouts are easier to read on mobile devices.
  • This is a common responsive design technique.

Question 9: Use Relative Units for Responsive Text

Problem Statement

Write CSS to set the paragraph font size using the rem unit.

CSS Code

p {    font-size: 1rem;}

Output

The paragraph font size scales based on the root font size.

Explanation

  • rem is relative to the root (html) font size.
  • It improves accessibility and consistency.
  • Relative units are preferred for responsive typography.

Question 10: Build a Responsive Card Layout

Problem Statement

Write CSS to create a responsive grid of cards that automatically adjusts the number of columns.

CSS Code

.cards {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));    gap: 20px;}

Output

The cards automatically adjust to fit the available screen width while maintaining a minimum width of 250px.

Explanation

  • auto-fit creates as many columns as possible.
  • minmax(250px, 1fr) ensures each card is at least 250px wide.
  • gap adds consistent spacing between cards.
  • This technique creates responsive layouts without media queries.

Key Takeaways

  • Responsive design makes websites work well on all screen sizes.
  • @media queries apply styles based on screen width or other conditions.
  • max-width targets smaller screens, while min-width targets larger screens.
  • Responsive images use max-width: 100% and height: auto.
  • Flexbox and Grid can adapt layouts for different devices.
  • Relative units like rem improve accessibility.
  • Responsive layouts enhance usability and SEO.
  • Testing designs on multiple screen sizes helps ensure a better user experience.

Frequently Asked Questions (FAQs)

1. What is responsive web design?

Responsive web design is a technique that allows websites to automatically adapt to different screen sizes and devices.

2. What is a media query?

A media query applies CSS rules only when specific conditions, such as screen width, are met.

Example:

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

3. How do I make an image responsive?

Use:

img {    max-width: 100%;    height: auto;}

4. What is the difference between max-width and min-width?

  • max-width applies styles up to a specified screen width.
  • min-width applies styles from a specified screen width and above.

5. Why should I use rem instead of px?

rem scales with the root font size, improving accessibility and making text more responsive.

6. Can Flexbox and Grid be used in responsive layouts?

Yes. Both Flexbox and Grid are widely used to create responsive website layouts.

7. Why is responsive design important?

Responsive design:

  • Improves mobile usability
  • Enhances user experience
  • Supports multiple screen sizes
  • Helps with SEO
  • Reduces the need for separate mobile websites

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

Related Posts

Scroll to Top