responsive width がうまくいかない

前提・実現したいこと

example-llistの左右に余白を持たせて、デバイスサイズ("screen and (min-width: 600px) and (max-width:1179px)",)にexample-itemをおさめたい

発生している問題・エラーメッセージ

上記の画像のように、itemの一部が隠れてしまう

試したこと

・example-item(even)の余白を0pxに指定して、一度全体像を確認
・example-listに左右に2vw指定して余白持たせる
・item width 50%,50vw 30%などサイズを調整する。
これらを行いましたが、うまくいきませんでした

該当のソースコード

HTML
1
2            <section class="example">
3                <div class="inner">
4                    <h3>TOEFL成功事例</h3>
5                    <ul class="example-list">
6                        <li class="example-item">
7                            <p class="ex-desc">TOEFL iBT 100点を突破してコロンビ <br>ア大学大学院に進学できました！</p><!-- /.ex-desc -->
8                            <div class="bg-white">
9                                <img src="./img/model01.png" alt="modal1">
10                            </div><!-- /.bg-white -->                            
11                            <div class="data-info">
12                                <p class="info">会社員</p><!-- /.data -->
13                                <p class="info2">T.Fujiyamaさん</p><!-- /.data -->
14                            </div><!-- /.data -->
15                            <p class="data">3ヶ月でTOEFL80→108点</p><!-- /.data -->
16                        </li><!-- /.example-item -->
17
18                        <li class="example-item">
19                            <p class="ex-desc">半年でTOEFL 40点→100点を達成！コ <br>ロンビア大学大学院に合格</p><!-- /.ex-desc -->
20                            <div class="bg-white">
21                                <img src="./img/model02.png" alt="model2">
22                            </div><!-- /.bg-white -->
23                            <div class="data-info">
24                                <p class="info">大学生</p><!-- /.data -->
25                                <p class="info2">Y.Takiyamaさん</p><!-- /.data -->
26                            </div><!-- /.data -->
27                            <p class="data">6ヶ月でTOEFL40→100点</p><!-- /.data -->
28                        </li><!-- /.example-item -->
29
30                        <li class="example-item">
31                            <p class="ex-desc">早稲田大学 国際教養学部AO入試合 <br>格！TOEFL iBT 109点</p><!-- /.ex-desc -->
32                        <div class="bg-white">
33                            <img src="./img/model03.png" alt="model3">
34                        </div><!-- /.bg-white -->
35                            <div class="data-info">
36                                <p class="info">高校生</p><!-- /.info -->
37                                <p class="info2">M.Yamadaさん</p><!-- /.info -->
38                            </div><!-- /.data-info -->
39                            <p class="data">5ヶ月でTOEFL68→109点</p><!-- /.data -->
40                        </li><!-- /.example-item -->
41                    </ul><!-- /.example-list -->
42                </div><!-- /.inner -->
43            </section><!-- /.example -->

CSS
1
2.example {
3  background-color: #1B224C;
4  border: 1px solid #707070;
5  width: 100vw;
6}
7
8.example h3 {
9  font-size: 3.6rem;
10  color: #fff;
11  margin: 60px auto 135px;
12  text-align: center;
13}
14
15.example-list {
16  display: -webkit-box;
17  display: -webkit-flex;
18  display: -ms-flexbox;
19  display: flex;
20  -webkit-box-pack: center;
21  -webkit-justify-content: center;
22      -ms-flex-pack: center;
23          justify-content: center;
24  -webkit-box-align: center;
25  -webkit-align-items: center;
26      -ms-flex-align: center;
27          align-items: center;
28  margin: 137px auto 60px;
29}
30
31@media screen and (max-width: 599px) {
32  .example-list {
33    -webkit-box-orient: vertical;
34    -webkit-box-direction: normal;
35    -webkit-flex-direction: column;
36        -ms-flex-direction: column;
37            flex-direction: column;
38  }
39}
40
41@media screen and (max-width: 599px) {
42  .example-list .example-item {
43    width: calc(100 / 3 - 2vw);
44  }
45}
46
47.example-list .example-item .ex-desc {
48  display: block;
49  color: #fff;
50  line-height: 1.81;
51  text-align: center;
52}
53
54.example-list .example-item .bg-white {
55  background-color: #fff;
56  width: 280px;
57  height: 170px;
58  margin: 0 auto;
59}
60
61.example-list .example-item .bg-white img {
62  display: block;
63  width: calc(125 / 280 *100%);
64  height: calc(140 /170 *100%);
65  padding-top: 31px;
66  margin: 0 auto;
67}
68
69.example-list .example-item .data-info {
70  display: -webkit-box;
71  display: -webkit-flex;
72  display: -ms-flexbox;
73  display: flex;
74  -webkit-box-pack: center;
75  -webkit-justify-content: center;
76      -ms-flex-pack: center;
77          justify-content: center;
78  -webkit-box-align: center;
79  -webkit-align-items: center;
80      -ms-flex-align: center;
81          align-items: center;
82  margin: 16px auto;
83}
84
85.example-list .example-item .data-info .info {
86  display: block;
87  width: 100px;
88  height: 30px;
89  background-color: #fff;
90  margin: 0px 4px;
91  text-align: left;
92  padding: 8px;
93  white-space: nowrap;
94}
95
96.example-list .example-item .data-info .info2 {
97  display: block;
98  width: 170px;
99  height: 30px;
100  background-color: #fff;
101  margin: 0px 4px;
102  text-align: left;
103  padding: 8px;
104  white-space: nowrap;
105}
106
107.example-list .example-item .data {
108  display: block;
109  width: 280px;
110  height: 30px;
111  background-color: #fff;
112  margin: 0px 4px;
113  text-align: left;
114  padding: 8px;
115  white-space: nowrap;
116}
117
118.example-list .example-item:nth-child(even) {
119  padding: 0px 30px;
120}
121
122@media screen and (max-width: 599px) {
123  .example-list .example-item:nth-child(even) {
124    margin: 30px auto;
125  }
126}

追記

CSS
1
2@media screen and (min-width: 600px) and (max-width: 1179px) {
3  .example-list .example-item {
4    width: 30%;
5  }
6}
7
8@media screen and (max-width: 599px) {
9  .example-list .example-item {
10    padding: 0px 30px;
11  }
12}
13
14.example-list .example-item .ex-desc {
15  display: block;
16  color: #fff;
17  line-height: 1.81;
18  text-align: center;
19}
20
21@media screen and (max-width: 599px) {
22  .example-list .example-item .ex-desc {
23    padding: 10px;
24  }
25}
26
27@media screen and (max-width: 599px) {
28  .example-list .example-item .ex-desc br {
29    display: none;
30  }
31}
32
33.example-list .example-item .bg-white {
34  background-color: #fff;
35  width: 280px;
36  height: 170px;
37  margin: 0 auto;
38}
39
40.example-list .example-item .bg-white img {
41  display: block;
42  width: calc(125 / 280 *100%);
43  height: calc(140 /170 *100%);
44  padding-top: 31px;
45  margin: 0 auto;
46}
47
48.example-list .example-item .data-info {
49  display: -webkit-box;
50  display: -webkit-flex;
51  display: -ms-flexbox;
52  display: flex;
53  -webkit-box-pack: center;
54  -webkit-justify-content: center;
55      -ms-flex-pack: center;
56          justify-content: center;
57  -webkit-box-align: center;
58  -webkit-align-items: center;
59      -ms-flex-align: center;
60          align-items: center;
61  margin: 16px auto;
62}
63
64.example-list .example-item .data-info .info {
65  display: block;
66  width: 100px;
67  height: 30px;
68  background-color: #fff;
69  margin: 0px 4px;
70  text-align: left;
71  padding: 8px;
72  white-space: nowrap;
73}
74
75.example-list .example-item .data-info .info2 {
76  display: block;
77  width: 170px;
78  height: 30px;
79  background-color: #fff;
80  margin: 0px 4px;
81  text-align: left;
82  padding: 8px;
83  white-space: nowrap;
84}
85
86.example-list .example-item .data {
87  display: block;
88  width: 280px;
89  height: 30px;
90  background-color: #fff;
91  margin: 0px 4px;
92  text-align: left;
93  padding: 8px;
94  white-space: nowrap;
95}
96
97@media screen and (max-width: 599px) {
98  .example-list .example-item .data {
99    margin: 0px 0px;
100  }
101}
102
103.example-list .example-item:nth-child(even) {
104  padding: 0px 30px;
105}
106
107@media screen and (min-width: 600px) and (max-width: 1179px) {
108  .example-list .example-item:nth-child(even) {
109    width: 30%;
110    margin: 2vw;
111  }
112}
113
114@media screen and (max-width: 599px) {
115  .example-list .example-item:nth-child(even) {
116    margin: 50px 0px;
117  }
118}

※example-itemのみ抜粋。

](3fd52aa4dc99987732d57e014f0b7543.jpeg)

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

回答1件

デバイスサイズ("screen and (min-width: 600px) and (max-width:1179px)",)にexample-itemをおさめたい

css
1    .example-list .example-item .data-info .info {
2      width: 100px;
3    }
4
5    .example-list .example-item .data-info .info2 {
6      width: 170px;
7    }

となっていますので、余白のことを考えなくても最低(100+170)*3=810の大きさになりますから、600pxの中に納めるのは物理的に無理です。

レイアウトを変更することをおすすめします。

投稿2021/11/12 02:01

Lhankor_Mhy

総合スコア36158

free_teku

2021/11/12 23:39

ご回答ありがとうございます。おっしゃる通りです。そこで、item にwidth: 30%を設定し、item(even)に、余白をもたました。しかしながら、2枚目の画像のようにかぶってしまいます。こちらの原因について、ご教授頂けると幸いです

Lhankor_Mhy

2021/11/13 01:17

確認していませんが、オーバーフローしてるだけでは。

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

あなたの回答

tips

プレビュー

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

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

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.46%

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

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

質問する

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

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