Responsive jQuery Masonry

990px以上の場合は４列表示にしたいのですがどうしたら良いでしょうか

lang
1#wrapper
2{
3    max-width: 60em; /* 960 px */
4    margin: 0 auto;
5}
6    #list
7    {
8        width: 103.125%; /* 990px */
9        overflow: hidden;
10        margin-left: -1.562%; /* 15px */
11        margin-bottom: -1.875em; /* 30px */
12    }
13        .item
14        {
15            width: 30.303%; /* 300px */
16            float: left;
17            margin: 0 1.515% 1.875em; /* 15px 30px */
18        }
19 
20@media only screen and ( max-width: 40em ) /* 640px */
21{
22    .item
23    {
24        width: 46.876%; /* 305px */
25        margin-bottom: 0.938em; /* 15px */
26    }
27}
28@media only screen and ( max-width: 20em ) /* 640px */
29{
30    #list
31    {
32        width: 100%;
33        margin-left: 0;
34    }
35        .item
36        {
37            width: 100%;
38            margin-left: 0;
39            margin-right: 0;
40        }
41}

![参考]WIDTH:600

行動規範の内容に同意します

回答1件

ベストアンサー

@mediaで囲っていない部分は 640px < width < 990px の時の指定という事でしょうか。
そうであれば、その囲っていない部分を@mediaで囲った上で、990px以上の時のスタイルを別途指定すればいけると思います。

lang
1/*
2  この辺に990px以上の時のスタイルを書く
3*/
4
5
6@media only screen and ( max-width: 989px ) /* 上の部分のスタイルを@mediaで囲う */
7{
8  #wrapper
9  {
10    max-width: 60em; /* 960 px */
11    margin: 0 auto;
12  }
13    #list
14    {
15        width: 103.125%; /* 990px */
16        overflow: hidden;
17        margin-left: -1.562%; /* 15px */
18        margin-bottom: -1.875em; /* 30px */
19    }
20        .item
21        {
22            width: 30.303%; /* 300px */
23            float: left;
24            margin: 0 1.515% 1.875em; /* 15px 30px */
25        }
26}
27 
28@media only screen and ( max-width: 40em ) /* 640px */
29{
30・・・以下略