レスポンシブ：スマホ表示の時に横並びのカードを1列にしたい

●解決したいこと
横並びのカードをスマホ表示の際に1列にしたい。
タブレット表示の横2列はwith:50%が効いて実現できたのですが、1列の場合width:100%;やmarginの設定が効かず困っています。!importantにすると実現できるのですが、どこの設定が優先されwidth:100%;が効かないのがわかりません。

HTML
1<body>
2    <!-- Start Header -->
3    <header>
4        <div class="container header-contents">
5            <div class="header-left">
6                <img src="img/logo.png" class="logo">
7            </div>
8            <div class="header-right">
9                <ul class="header-list">
10                    <li><a href="#card">Card</a></li>
11                    <li><a href="#news">News</a></li>
12                    <li><a href="#price">Price</a></li>
13                    <li><a href="#access">Access</a></li>
14                    <li><a href="#contact">Contact</a></li>
15                </ul>
16            </div>
17        </div>
18    </header>
19    <!-- End Header -->
20    <!-- Start Main Page -->
21    <section class="main-wrapper">
22        <div class="container">
23            <h1>一番伝えたいことを書く</h1>
24            <p>リードリードリード</p>
25            <a href="#" class="btn">お問い合わせ</a>
26        </div>
27    </section>
28    <!-- End Main Page -->
29
30    <!-- Start Card Page -->
31    <section class="card-wrapper">
32        <div class="container">
33            <div class="heading">
34                <h2>Card</h2>
35            </div>
36
37            <div class="cards">
38                <div class="card">
39                    <img src="img/card-img.svg">
40                    <p class="title">タイトルタイトル</p>
41                    <p class="text-contents">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
42                </div>
43                <div class="card">
44                    <img src="img/card-img.svg">
45                    <p class="title">タイトルタイトル</p>
46                    <p class="text-contents">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
47                </div>
48                <div class="card">
49                    <img src="img/card-img.svg">
50                    <p class="title">タイトルタイトル</p>
51                    <p class="text-contents">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
52                </div>
53                <div class="card">
54                    <img src="img/card-img.svg">
55                    <p class="title">タイトルタイトル</p>
56                    <p class="text-contents">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
57                </div>
58                <div class="card">
59                    <img src="img/card-img.svg">
60                    <p class="title">タイトルタイトル</p>
61                    <p class="text-contents">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
62                </div>
63                <div class="card">
64                    <img src="img/card-img.svg">
65                    <p class="title">タイトルタイトル</p>
66                    <p class="text-contents">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
67                </div>
68            </div>
69        </div>
70    </section>
71    <!-- End Card Page -->

css
1@charset "UTF-8";
2* {
3  margin: 0;
4  padding: 0;
5}
6
7body {
8  font-family: 'Yu Gothic';
9}
10
11.container {
12  width: 1086px;
13  max-width: 100%;
14  margin: 0 auto;
15}
16
17li {
18  list-style: none;
19}
20
21a {
22  text-decoration: none;
23  color: #fff;
24}
25
26header {
27  height: 100px;
28  background-color: #3F51B5;
29  box-shadow: 0 3px 3px;
30  position: fixed;
31  top: 0;
32  left: 0;
33  width: 100%;
34  box-shadow: 0 3px 3px #000000;
35  z-index: 999;
36}
37
38.header-contents {
39  display: flex;
40  justify-content: space-between;
41}
42
43.logo {
44  padding: 31px 0 30px 10px;
45  width: 200px;
46  height: 39px;
47}
48
49.header-right {
50  width: 344px;
51  height: 25.5px;
52  padding: 40px 10px 34.5px 0;
53  font-size: 16px;
54}
55
56.header-list {
57  display: flex;
58}
59
60.header-list li {
61  margin-right: 30px;
62}
63
64.header-list a:hover {
65  border-bottom: 3px solid #E81919;
66}
67
68.main-wrapper {
69  text-align: center;
70  background-image: url(../img/main-img.jpg);
71  background-position: center center;
72  background-repeat: no-repeat;
73  background-size: cover;
74  height: 700px;
75  padding-top: 100px;
76}
77
78.main-wrapper h1 {
79  width: 748px;
80  height: 87px;
81  padding-top: 249px;
82  margin-bottom: 12px;
83  margin: 0 auto;
84  font-size: 68px;
85  line-height: 108px;
86}
87
88.main-wrapper p {
89  width: 342px;
90  height: 49px;
91  padding-bottom: 82px;
92  margin: 0 auto;
93  font-size: 38px;
94  font-weight: bold;
95  line-height: 61px;
96}
97
98.btn {
99  width: 228px;
100  height: 49px;
101  padding: 17px 81px;
102  margin-bottom: 138px;
103  display: inline-block;
104  background-color: #3F51B5;
105  border-radius: 12px;
106  box-shadow: 0 3px 6px #000000;
107  font-size: 38px;
108  font-weight: bold;
109}
110
111.card-wrapper {
112  background-color: #efefef;
113}
114
115.heading {
116  padding-top: 68px;
117  padding-bottom: 44.3px;
118}
119
120.heading h2 {
121  font-size: 60px;
122  text-align: center;
123  position: relative;
124}
125
126.heading h2::before {
127  content: '';
128  display: inline-block;
129  position: absolute;
130  left: 50%;
131  bottom: -44.3px;
132  /*線の上下位置*/
133  -webkit-transform: translateX(-50%);
134  transform: translateX(-50%);
135  /*位置調整*/
136  background-color: #3F51B5;
137  /*線の色*/
138  width: 76px;
139  /*線の長さ*/
140  height: 5px;
141  /*線の太さ*/
142}
143
144.cards {
145  display: flex;
146  flex-wrap: wrap;
147  padding-top: 113px;
148  padding-bottom: 117px;
149}
150
151.card {
152  background-color: #fff;
153  border-radius: 4px;
154  margin-bottom: 20px;
155  margin-right: 30px;
156  padding: 16px 16px 28px 16px;
157  width: calc(33.3333333% - 60px / 3);
158  box-sizing: border-box;
159}
160
161.card:nth-child(3n) {
162  margin-right: 0;
163}
164
165.card img {
166  margin-bottom: 26px;
167  width: 100%;
168}
169
170.title {
171  color: #6f7579;
172  font-size: 20px;
173  margin-bottom: 20px;
174}
175
176.text-contents {
177  color: #6f7579;
178  font-size: 16px;
179}
180
181@media screen and (max-width: 767px) {
182  .logo {
183    width: 120px;
184  }
185  .header-right {
186    display: none;
187  }
188  .card {
189    width: 100% !important;
190    margin-right: 0 !important;
191  }
192}
193
194@media screen and (max-width: 1365px) {
195  header {
196    height: 60px;
197    width: 100%;
198  }
199  .logo {
200    padding: 20px 50px;
201    width: 130px;
202    height: auto;
203  }
204  .header-right {
205    width: 250px;
206    height: 20px;
207    padding: 20px;
208    font-size: 13px;
209  }
210  .header-list li {
211    margin-right: 15px;
212  }
213  .main-wrapper {
214    height: 400px;
215    padding-top: 60px;
216  }
217  .main-wrapper h1 {
218    font-size: 30px;
219    width: 100%;
220    padding-top: 70px;
221  }
222  .main-wrapper p {
223    font-size: 20px;
224    width: 100%;
225    padding-bottom: 40px;
226  }
227  .main-wrapper .btn {
228    width: 150px;
229    height: 40px;
230    padding: 8px 40px;
231    margin-bottom: 60px;
232    font-size: 20px;
233    font-weight: bold;
234    line-height: 40px;
235  }
236  .card {
237    width: calc(50% - 30px / 2);
238  }
239  .card:nth-child(3n) {
240    margin-right: 30px;
241  }
242  .card:nth-child(2n) {
243    margin-right: 0;
244  }
245}
246

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

回答1件

ベストアンサー

下記のような順番で書いてみてください。

CSS
1@media screen and (max-width: 1365px) {
2    /* 内容 */
3}
4@media screen and (max-width: 767px) {
5    /* 内容 */
6}

投稿2019/07/29 16:45

kei344

総合スコア69407

退会済みユーザー

2019/07/29 17:04 編集

ご回答ありがとうございます。順番を入れ替えるとwidth100%で表示されましたが、3枚目のみmarginが付いてしまいます。6枚目はmargin０が実現できています。なぜなのでしょうか。

kei344

2019/07/29 17:10

(max-width: 1365px) は (max-width: 767px) を含むので、両方が指定されているからです。

退会済みユーザー

2019/07/29 18:07

ありがとうございました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

レスポンシブ：スマホ表示の時に横並びのカードを1列にしたい

関連した質問