How to hide elements in responsive layout using CSS ?

Last Updated : 01 Oct, 2024

CSS provides powerful tools to create responsive websites that adapt to different screen sizes and devices. One of the key techniques for creating responsive designs is media queries, introduced in CSS3. Media queries allow you to apply styles based on the characteristics of the device, such as its width, height, resolution, orientation, and more.

By using media queries, you can hide or display elements based on the screen size, ensuring that users have an optimal experience regardless of the device they're using. This is particularly useful when you want to show certain elements on larger screens and hide them on smaller screens, or vice versa.

What Are Media Queries?

A media query consists of two parts:

Media Type (optional): Describes the general class of devices the media query applies to (e.g., screen, print, all).
Media Features: Describes specific characteristics of the device, such as width, height, orientation, etc. You can test the values of these features and apply specific styles based on those values.

Common Media Query Syntax:

@media only screen and (min-width: 600px) {
    /* Styles applied to screens with a width of 600px or more */
}

@media only screen and (max-width: 400px) {
    /* Styles applied to screens with a width of 400px or less */
}

Using Media Queries to Hide and Show Elements

You can use media queries to change the display property of elements based on the screen size. For example, you can hide an element on smaller screens and display it on larger screens.

Syntax for Media Queries:

@media only screen and (min-width: 600px) {
    .element {
        display: block;
    }
}

@media only screen and (max-width: 400px) {
    .element {
        display: none;
    }
}

Example: Hiding and Displaying Elements Based on Screen Size

Let's create an example where different elements are hidden or shown based on the screen width using min-width and max-width media queries.

html

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

CSS Introduction

sayantanm19

Improve

Article Tags :

How to hide elements in responsive layout using CSS ?

What Are Media Queries?

Common Media Query Syntax:

Using Media Queries to Hide and Show Elements

Syntax for Media Queries:

Example: Hiding and Displaying Elements Based on Screen Size

Similar Reads

Thank You!

What kind of Experience do you want to share?