How to hide elements in responsive layout using CSS ?

CSS can be used to hide or display elements of the page. This can be used in a responsive website to show certain elements that are only possible to interact with a larger screen size for a good user experience.

Media queries are the technique introduced in CSS3 to help to design responsive websites. A media query has two parts, one is the optional media type which helps to describe the general class of devices that the media query will work. The other one is the media feature which describe specific characteristics of device where the page is to be displayed. These can be tested for their value to accordingly change the behavior of the contents of the page.

The media type used here is screen, which is used with the ‘only’ keyword so that the media query only affects the selected screens. The media feature can be changed based on the width. For example, it can be used with the width media feature. This can be modified to change when the width is set to a particular value like using the min-width and max-width. Other supported media features can be used to check for values that help in a responsive website.



Syntax:

filter_none

edit
close

play_arrow

link
brightness_4
code

// Check if the height is at least 600px
@media only screen and (min-width: 600px) {
    .large {
        display: block;
    }
}

chevron_right


In this example, the elements are hide by setting the ‘display’ property to ‘none’. The media queries contain classes that will set the display property to blockExample:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to hide elements in responsive
        layout using CSS?
    </title>
      
    <style>
        .box {
            margin: 20px;
            border: 1px dotted;
            height: 100px;
            width: 100px;
            background-color: lightgreen;
            display: none;
        }
  
        /* Check if the screen size is at least 600px */
        @media only screen and (min-width: 600px) {
            .lg {
                display: block;
            }
        }
  
        /* check if the screen size is at least 400px */
        @media only screen and (min-width: 400px) {
            .md {
                display: block;
            }
        }
  
        /* check if the screen size is at least 100px */
        @media only screen and (min-width: 100px) {
            .sm {
                display: block;
            }
        }
    </style>
</head>
  
<body>
    <h1>
        Hiding elements in responsive
        layout using CSS?
    </h1>
  
    <div class="box lg">
        This is only visible on
        large devices
    </div>
      
    <div class="box md">
        This is only visible on
        medium and large devices
    </div>
      
    <div class="box sm">
        This is only visible on smaller,
        medium and large devices
    </div>
</body>
  
</html>

chevron_right


Output:

  • When the screen size is at least 600px:
    large-600
  • When the screen size is at least 400px:
    medium-400
  • When the screen size is at least 100px:
    small-100


My Personal Notes arrow_drop_up

Im listening

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.