HTML Responsive Design - Solved Practice Questions

Introduction

Responsive design helps a webpage look good on desktops, laptops, tablets, and mobile phones. In HTML, responsive webpages often use the viewport meta tag, flexible images, and responsive layout techniques. In this chapter, you’ll practice beginner-friendly responsive design examples with solved questions. HTML Responsive Design help to understand the concepts.

Question 1

Problem Statement

Create a responsive webpage using the viewport meta tag.

HTML Code

<!DOCTYPE html>
<html>
<head>

    <meta charset="UTF-8">

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

    <title>Responsive Page</title>

</head>
<body>

    <h1>Welcome to HTML</h1>

    <p>This page is mobile friendly.</p>

</body>
</html>

Output

Welcome to HTML

This page is mobile friendly.

Step-by-Step Explanation

The viewport meta tag makes the webpage fit different screen sizes.
width=device-width matches the page width to the device width.
initial-scale=1.0 sets the initial zoom level.

Question 2

Problem Statement

Display a responsive image.

HTML Code

<!DOCTYPE html>
<html>
<head>

    <title>Responsive Image</title>

</head>
<body>

    <img
        src="nature.jpg"
        alt="Nature"
        style="max-width:100%; height:auto;">

</body>
</html>

Output

[Nature Image]

(The image automatically adjusts to different screen sizes.)

Step-by-Step Explanation

max-width:100% prevents the image from overflowing its container.
height:auto keeps the image’s original aspect ratio.
The image shrinks on smaller screens.

Question 3

Problem Statement

Create a responsive table container.

HTML Code

<!DOCTYPE html>
<html>
<head>

    <title>Responsive Table</title>

</head>
<body>

    <div style="overflow-x:auto;">

        <table border="1">

            <tr>
                <th>Name</th>
                <th>Course</th>
            </tr>

            <tr>
                <td>Amit</td>
                <td>HTML</td>
            </tr>

        </table>

    </div>

</body>
</html>

Output

----------------------
Name    Course
----------------------
Amit    HTML

Step-by-Step Explanation

overflow-x:auto adds horizontal scrolling if the table is too wide.
This prevents the table from breaking the page layout.
Users can scroll the table on smaller screens.

Question 4

Problem Statement

Create a responsive embedded YouTube video.

HTML Code

<!DOCTYPE html>
<html>
<head>

<title>Responsive Video</title>

<style>

.video-container{
    position:relative;
    width:100%;
    max-width:700px;
    padding-bottom:56.25%;
    height:0;
}

.video-container iframe{
    position:absolute;
    width:100%;
    height:100%;
    border:none;
}

</style>

</head>
<body>

<div class="video-container">

<iframe
src="https://www.youtube.com/embed/VIDEO_ID"
allowfullscreen>
</iframe>

</div>

</body>
</html>

Output

[Responsive YouTube Video]

Step-by-Step Explanation

The container keeps a 16:9 aspect ratio.
The iframe fills the container.
The video adjusts automatically to different screen sizes.

Question 5

Problem Statement

Create a responsive webpage with a heading and image.

HTML Code

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">

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

<title>Responsive Layout</title>

</head>
<body>

<h1>HTML Responsive Design</h1>

<img
src="computer.jpg"
alt="Computer"
style="max-width:100%;height:auto;">

<p>Learning HTML is easy.</p>

</body>
</html>

Output

HTML Responsive Design

[Responsive Image]

Learning HTML is easy.

Step-by-Step Explanation

The viewport tag makes the page mobile-friendly.
The image scales according to screen size.
The layout works well on desktops and mobile devices.

Question 6

Problem Statement

Create a responsive image using the <picture> element.

HTML Code

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">

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

<title>Picture Element</title>

</head>
<body>

<picture>

    <source
    media="(max-width:600px)"
    srcset="mobile.jpg">

    <source
    media="(max-width:1000px)"
    srcset="tablet.jpg">

    <img
    src="desktop.jpg"
    alt="Responsive Image"
    style="max-width:100%;height:auto;">

</picture>

</body>
</html>

Output

Small Screen  → mobile.jpg

Medium Screen → tablet.jpg

Large Screen  → desktop.jpg

Step-by-Step Explanation

<picture> allows different images for different screen sizes.
<source> defines which image to load based on screen width.
<img> acts as the default image if no <source> matches.

Question 7

Problem Statement

Create responsive text that adapts to different screen sizes.

HTML Code

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">

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

<title>Responsive Text</title>

</head>
<body>

<h1 style="font-size:5vw;">
Welcome to HTML
</h1>

<p style="font-size:2.5vw;">
This text adjusts according to screen width.
</p>

</body>
</html>

Output

Large Screen → Larger Text

Small Screen → Smaller Text

Step-by-Step Explanation

vw means viewport width.
The text size changes according to the browser width.
Responsive text improves readability on different devices.

Question 8

Problem Statement

Create a simple responsive page layout.

HTML Code

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">

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

<title>Responsive Layout</title>

</head>
<body>

<header>

<h1>My Website</h1>

</header>

<main>

<p>Responsive content goes here.</p>

</main>

<footer>

<p>© 2026 My Website</p>

</footer>

</body>
</html>

Output

My Website

Responsive content goes here.

© 2026 My Website

Step-by-Step Explanation

Semantic tags organize the webpage structure.
The viewport tag makes the layout mobile-friendly.
The layout works well on desktops, tablets, and phones.

Question 9

Problem Statement

Create a responsive navigation menu.

HTML Code

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">

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

<title>Responsive Navigation</title>

</head>
<body>

<nav>

<a href="#">Home</a> |

<a href="#">Courses</a> |

<a href="#">About</a> |

<a href="#">Contact</a>

</nav>

</body>
</html>

Output

Home | Courses | About | Contact

Step-by-Step Explanation

<nav> contains navigation links.
The viewport meta tag helps the navigation display properly on mobile devices.
CSS can later be added to make the navigation fully responsive.

Question 10

Problem Statement

Create a complete responsive HTML webpage.

HTML Code

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">

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

<title>Responsive Webpage</title>

</head>
<body>

<header>

<h1>Learn HTML</h1>

</header>

<img
src="html-banner.jpg"
alt="HTML Banner"
style="max-width:100%;height:auto;">

<main>

<p>Build responsive websites using HTML.</p>

</main>

<footer>

<p>© 2026 HTML Course</p>

</footer>

</body>
</html>

Output

Learn HTML

[Responsive Banner]

Build responsive websites using HTML.

© 2026 HTML Course

Step-by-Step Explanation

The viewport tag makes the page responsive.
The image scales automatically on different screen sizes.
Semantic tags improve the page structure.
The webpage is suitable for desktops, tablets, and mobile devices.

Key Takeaways

Responsive design makes webpages adapt to different screen sizes.
Use <meta name="viewport"> for mobile-friendly pages.
Use max-width: 100% and height: auto for responsive images.
The <picture> element serves different images for different devices.
Use vw units for responsive text sizing.
Wrap wide tables with overflow-x: auto.
Responsive videos adjust to different screen sizes.
Semantic HTML improves page structure and accessibility.
Responsive design provides a better user experience.
Always test your webpage on desktop, tablet, and mobile devices.

Frequently Asked Questions (FAQs)

1. What is responsive design?

Responsive design allows a webpage to adapt to different screen sizes and devices.

2. Why is the viewport meta tag important?

It tells the browser how to scale the webpage on mobile devices.

3. How do I add the viewport meta tag?

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

4. How do I make an image responsive?

<img src="image.jpg" alt="Image" style="max-width:100%; height:auto;">

5. What is the `<picture>` element used for?

It allows different images to be displayed based on the screen size or device.

6. What does `vw` mean in CSS?

vw stands for viewport width and is used for responsive sizing.

7. How can I make a table responsive?

Wrap the table inside a container with overflow-x: auto.

8. Are responsive webpages important?

Yes. They provide a better experience on mobile, tablet, and desktop devices.

9. Does HTML alone make a website fully responsive?

HTML provides the structure, but CSS is mainly responsible for creating fully responsive layouts.

10. Which devices should I test a responsive webpage on?

You should test on desktop, tablet, and mobile devices with different screen sizes.

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

Rishabh Kumar

Introduction

Question 1

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 2

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 3

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 4

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 5

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 6

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 7

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 8

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 9

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 10

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Key Takeaways

Frequently Asked Questions (FAQs)

1. What is responsive design?

2. Why is the viewport meta tag important?

3. How do I add the viewport meta tag?

4. How do I make an image responsive?

5. What is the <picture> element used for?

6. What does vw mean in CSS?

7. How can I make a table responsive?

8. Are responsive webpages important?

9. Does HTML alone make a website fully responsive?

10. Which devices should I test a responsive webpage on?

Related Posts

5. What is the `<picture>` element used for?

6. What does `vw` mean in CSS?