Open In App

How to hide elements in responsive layout using CSS ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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:




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


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:




<!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>


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


Last Updated : 11 Oct, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads