How to make a HTML div responsive using CSS ?

Last Updated : 23 Jul, 2024

The CSS Media Query can be used to make an HTML "div" responsive. The media queries allow the users to change or customize the web pages for many devices like desktops, mobile phones, tablets, etc without changing the markups. Using the media query, the user can change the style of a particular element for different sizes of screen.

Note: The CSS @media rule consists of a media type and it can have one or more expressions, which can result in values like "true" or "false".

The following meta viewport element has to be included in the "head" section of the HTML file for the responsive web page.

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

Syntax:

@media not|only mediatype and (expressions) {
    // Your CSS codes
}

Approaches:

First create a HTML structure with three div for creating box like structure and add heading with help of heading tag
Now set a default font size for all elements and establish a base structure for the responsive divs with a fixed height and width.
Organize three divs within a container div, each with a specific width, inline-block display, and distinct background colors.
Implement a media query to adjust div widths to 70% when the screen width is 500px or less, ensuring responsiveness on smaller devices.

Example:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Blocks</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        h1 {
            margin-top: 20px;
            color: #333;
        }

        p {
            color: #555;
        }

        .mnb {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px;
            margin: 20px 0;
        }

        .mnb div {
            height: 100px;
            width: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            border-radius: 5px;
        }

        .first {
            background-color: green;
        }

        .second {
            background-color: blue;
        }

        .third {
            background-color: yellow;
            color: black;
        }

        @media screen and (max-width: 500px) {
            .mnb div {
                width: 70%;
                font-size: 20px;
            }
        }
    </style>
</head>

<body>
    <h1>Geeks for Geeks</h1>
    <p>Responsive div using CSS.</p>
    <div class="mnb">
        <div class="first">
            <p>First block</p>
        </div>
        <div class="second">
            <p>Second block</p>
        </div>
        <div class="third">
            <p>Third block</p>
        </div>
    </div>
    <p>
        The media query will only apply
        if the media type is screen
        and the viewport is equal to
        or less than 500px
    </p>
</body>

</html>

Output:

Similarly, one can add or change various styles for a particular HTML element for different screen sizes by adding CSS code in @media query section as shown in the above example.

How to create a Responsive Inline Form using CSS ?

deepak710agarwal

Improve

Article Tags :

How to make a HTML div responsive using CSS ?

Syntax:

Approaches:

Similar Reads

Thank You!

What kind of Experience do you want to share?