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:
Similar Reads
How to create Responsive Floating Elements using CSS ? The Responsive Floating Elements are useful for adaptable layouts on different devices. It ensures a seamless user experience by adjusting the size and arrangement of cards based on the screen size. The float property is employed to arrange the cards horizontally, making them responsive on various d
3 min read
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 elem
2 min read
How to create a Responsive Inline Form using CSS ? When the browser window is resized, the labels and inputs will stack on top of each other for smaller screens. To create a responsive inline form using CSS, use a container with flexible styling, such as Flexbox or Grid, to arrange form elements horizontally. Utilize media queries to adjust the layo
3 min read
How to Hide an HTML Element in Mobile View using jQuery ? Suppose we have given an HTML document and the task is to hide an HTML element in mobile view with the help of jQuery. Approach: Initially, we are required to detect whether our system is 'Mobile' or not, for that window.navigator.userAgent property is used. It returns a string containing informatio
2 min read
How to Hide Elements in Mobile Size and Display in Laptop size using Tailwind CSS ? Tailwind CSS is a popular utility-first CSS framework that provides a variety of built-in classes for rapid web development. One common requirement is to hide elements on mobile devices while keeping them visible on larger screens, such as laptops or desktops. In this article, we will see two differ
3 min read
How to hide an element when printing a web page using CSS? Media queries allow you to apply different styles for different media types, such as screens or print. To hide certain elements (like headers or images) when printing a webpage, you can use the @media print query and set the visibility: hidden or display: none to hide those elements during printing.
2 min read