Change classes fluid layout css

Question

I have a fluid css grid ( http://cssgrid.net/ )

I am currently designing a website, using this grid system. Although, I am unsure how to change the classes when there is "not enough room for them".

Example, I have a top bar like this:

Link: http://i47.tinypic.com/2eouv54.png

But when I resize my browser window enough, I end up with this:

As you can see, it looks completely messed up!

How can I get the most of out this fluid layout. I mean, how can I, when there isn't enough room for those buttons and the username, get them to fit? Ie by making a new class and place it somewhere else.

Thanks!

Answer 1

When you have something like that:

aside {float: left; width: 50%; padding: 0 50px; box-sizing: border-box; background: #000;}

you can add something like this:

@media only screen
and (min-device-width : 320px)
and (max-device-width : 768px) {
   aside {float: none; width: 100%; padding: 0 20px;}
}

First rule will be applied for all screen sizes. Second rule will be applied for devices with width from 320px to 768px and it will overwrite existing rules. It means that would change float, width and padding but it will not change eg background or box-sizing.