CSS media queries

Здравейте,
Трябва ми странична гледна точка, че моята вече явно прекалено "тясна".

Опитвам се да направя "grid" от "кутии" които от да се разтягат и свиват в зависимост от резолюцията.

Пример:

@media screen and(min-width: 0px) and (max-width:699px
{

.box{
width:100%;
max-width:699px;
}

}

@media screen and(min-width: 700px) and (max-width: ...px
{

.box{
width:100%;
max-width:350px;
}

}

с второто искам като стигне 700 да се чупи и да кутиите да станат 2

Според моята логика трябва да се получи, но не се получава.

Някакви идеи?

Написал си with вместо width !!!

Не съм копирал кода, там си е както трябва. Явно в бързината да го напиша съм го объркал

Този урок е интересен:
http://webdesign.tutsplus.com/tutor...ve-grid-plus-handy-css3-media-query-reporter/

Благодаря! Ще го разгледам, но така или иначе се справих с проблема