Home » CSS, CSS3, Design, HTML5

Tips: In Responsive Design how to remove content using css media queries

18 January 2013 No Comment
Share on Facebook

To create layout which scales across multiple devices, We dont always use the same content or images across the smaller screen size devices.

It is wise to use minimal content in small screen devices. So while creating responsive design!! means loading different stylesheet pages or applying different styles for the content. We want remove some containers from the layout inside media queries CSS.

 

responsive-design-media-queries

Problem:
How to remove some of the text or image content from HTML page on small screen devices while using media queries?, But which is better way to do..

Solution:
Applying simple css property removes the content from layout, which we are using for long time to remove content on HTML page.

We can use either one of the below in media queries css..

display: none;

or

visibility: hidden;

Explanation:

Which property is wise to use? to get rid of the content in css media queries.

CSS Property visibility: hidden;

When using the css property “visibility: hidden” we are actually hiding the content from viewing but not removed from the html page. So this is not the optimized way to use.

CSS Property display: none;

When using the CSS property “display: none”, we actually getting rid of the entire content from the screen. So this is the optimized way of removing any container from the screen when using responsive design for smaller screen devices.

Keywords to here:

  • hiding content on responsive design
  • remove image for responsive design
  • change visibility for small screen device
  • remove content for css media queries
  • media queries to remove div, image

GET THE UPDATES VIA EMAIL

We don't share your email anywhere, grab our rss via feedburner