teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

タブレットのソースを書き直しました。

2021/10/22 17:34

投稿

niconic73027793
niconic73027793

スコア215

answer CHANGED
@@ -1,41 +1,24 @@
1
1
  #container {
2
- width: 100%;
3
- display:flex;
2
+ display:flex;
4
-
5
- max-width:100%;
3
+ width:100%;
6
-
7
- align-items:center;
4
+ padding-top:30px;
5
+
8
-
6
+ margin:0 auto;
9
7
  }
10
- #container .item {
8
+ #container .item img {
11
9
  background: rgb(135, 199, 135);
12
- width: 100%;
13
- vertical-align:middle;
14
-
15
- aspect-ratio: 4/3;
16
- }
17
- .item img{
18
- max-width:400px;
19
- width:700px;
10
+ width:300px;
20
- width:100%;
21
11
  height:auto;
22
12
  vertical-align: bottom;
13
+
14
+
23
15
  }
24
- @media screen and (min-width: 768px) {
16
+
25
- .item img{
17
+
26
-
27
-
28
- }
29
- }
30
18
  /*スマホ*/
31
19
  @media screen and (max-width: 767px) {
32
- .item{
20
+
33
- margin-bottom:461px;
34
- }
35
-
36
-
37
-
38
- .item img{
21
+ #container .item img{
39
22
  max-width:100%;
40
23
  min-width:100%;
41
24
  width:500px;
@@ -47,13 +30,17 @@
47
30
  }
48
31
  }
49
32
  /*タブレット*/
50
- @media only screen and (min-width: 767px) and (max-width: 1280px) {
33
+ @media screen and (min-width:768px) and ( max-width:1024px) {
34
+ /* 画面サイズが768pxから1024pxまではここを読み込む */
51
- .item img{
35
+ #container {
36
+ flex-wrap:wrap;
52
- max-width:100%;
37
+ width:100%;
38
+ margin-right: -60px;
39
+
40
+
53
41
  }
42
+ #container .item img {
43
+ width:350px;
44
+ flex-wrap:wrap;
54
45
 
55
- }
46
+ }
56
- スマホ までやって PCとタブレットの調整はまだです。
57
-  こんな感じですかね?
58
-
59
- 理想の形ではないかもしれません。