hide elements if too small without js [closed]

Question

I like to hide content, if the window size falls below a minimum size. I found an example (http://css-tricks.com/dynamic-page-replacing-content/), but I could not find out, why it works.

<div class="container">
    <div class="box left">foo1</div>
    <aside class="box right">foo2</aside>
</div>

The goal is, if the width of container falls below a specified minimum size aside will be hidden. That should work without javascript, just using css.

Answer 1

You are looking for is "CSS Media Queries".

Checkout this article for more information: http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

This example would accomplish what you are looking for with only CSS:

@media only screen and (max-device-width: 480px) {
  aside { 
    display:none;
  }
}

You might also check out twitter bootstrap to see how this is used to make responsive grid systems and classes that hide elements in specific contexts