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
- How to Show and Hide div elements using Checkboxes ?
- How to Show and Hide div elements using radio buttons?
- Responsive images in Bootstrap with Examples
- HTML | Responsive full page image using CSS
- How to make the existing bootstrap 2 table responsive?
- How to create Responsive Bottom Navigation Bar using Bootstrap ?
- HTML | Viewport meta tag for Responsive Web Design
- HTML | Responsive Modal Login Form
- How to create a responsive Modal Sign-Up form for a Website?
- Responsive Video or Slideshow Embeds in Bootstrap with Examples
- HTML | Layout
- CSS | Website Layout
- How to design Responsive card-deck with fixed width in Bootstrap ?
- How to create responsive image gallery using HTML, CSS, jQuery and Bootstrap?
- CSS | Grid Layout Module
- CSS | table-layout Property
- Advance CSS layout with flexbox
- How to create responsive website zoomed out to full width on mobile using Bootstrap?
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.