Tile boxes of differnet size responsively

Question

I have some problems with my responsive design.

I have 20 boxes like this

I want to do responsive with mediaqueries

@media screen and (max-width:960px) {

}

@media screen and (max-width: 783px) {

}

@media screen and (max-width: 524px) {

}

But I can't control the boxes in my design. JSFiddle

Answer 1

Try some solutions like these:

• http://purecss.io/grids/
• http://semantic-ui.com/

Or try adding a specific width to each box for each media query.