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

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.

• HTML5 Tutorials
• CSS3 Tutorials

Image may be NSFW.
Clik here to view.

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

Related posts:

1. CSS3 Multi-column layout | CSS
2. CSS background image
3. Android Design – Ice Cream Sandwich
4. CSS HR html tag, change style color | horizontal line
5. Play Flv enables Windows Media Player open FLV files