Advanced CSS HTML Window Resizing

Question

How did this site achieve this effect?

http://demicreative.com

Simply re-size the window you are viewing the site in and you will see it completely change to suit mobile.

How can one do this?!?

Please excuse the title if it seems misleading

Answer 1

This is a technique called Responsive Web Design. In a few words, this technique is based on response differently depending on the size of the screen that the page is being rendered. That is why when you re-size the window, the content suits this "new" screen.

This can be accomplished using media queries, which allows the designer to target not only certain device classes, but inspect the physical characteristics of the device rendering the page.

So, for example, in your CSS you could have this piece of code:

@media screen and (max-width: 480px) {
  .column {
    float: right;
  }
}

Which would float to the right all the elements of the class .column to the right, just when the screen width is smaller than 480px.

Answer 2

You can use Get Sleleton to achieve something like that http://www.getskeleton.com

Html5 Boilerplate https://github.com/h5bp/html5-boilerplate/wiki/css