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.
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:
- When the screen size is at least 600px:
- When the screen size is at least 400px:
- When the screen size is at least 100px:
- Best way to make a d3.js visualization layout responsive
- HTML | Responsive full page image using CSS
- How to create responsive image gallery using HTML, CSS, jQuery and Bootstrap?
- Creating Responsive Grid Vanilla using HTML,CSS and Bootstrap
- How to make a HTML div responsive using CSS ?
- How to divide text into two columns layout using CSS ?
- How to hide an element when printing a web page using CSS?
- Hide scroll bar, but while still being able to scroll using CSS
- How to hide/visible the backside of a rotated div element using CSS ?
- How to show/hide dropdown menu on mouse hover using CSS ?
- How to create Responsive Bottom Navigation Bar using Bootstrap ?
- How to create responsive website zoomed out to full width on mobile using Bootstrap?
- CSS | table-layout Property
- Advance CSS layout with flexbox
- CSS | Website Layout
- CSS | Layout - Horizontal & Vertical Align
- CSS | Grid Layout Module
- CSS Grid Layout: The Fr Unit
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.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.