How to make a HTML div responsive using CSS ?

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.

The CSS @media rule consists of a media type and it can have one or more expressions, which can result to values like “true” or “false”.

Syntax:

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

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

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



Example: In the following example, all three HTML “div” blocks are aligned horizontally. But whenever the screen size is reduced below “500px”, all the three blocks will automatically align vertically. The width property for the “div” element in the @media query for screen size is set to less than or equal to “500px”.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <style>
        div {
            margin: 10px;
        }
  
        .first {
            width: 25%;
            display: inline-block;
            background-color: green;
        }
  
        .second {
            width: 25%;
            display: inline-block;
            background-color: blue;
        }
  
        .third {
            width: 25%;
            display: inline-block;
            background-color: yellow;
        }
  
        @media screen and (max-width: 500px) {
  
            .first,
            .second,
            .third {
                width: 70%;
            }
        }
    </style>
</head>
  
<body>
    <h1>Geeks for Geeks</h1>
    <p>Responsive div using css.</p>
    <div class="first">
        <p>First block</p>
    </div>
    <div class="second">
        <p>Second block</p>
    </div>
    <div class="third">
        <p>Third block </p>
    </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>

chevron_right


Output:

  • In the original window size, all the three blocks are aligned horizontally.

  • When the screen size is reduced to “500px”, all the three blocks are placed vertically.

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.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.