回答編集履歴

1

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

2021/10/22 17:34

投稿

niconic73027793
niconic73027793

スコア215

test CHANGED
@@ -1,78 +1,44 @@
1
1
  #container {
2
2
 
3
- width: 100%;
3
+ display:flex;
4
4
 
5
- display:flex;
5
+ width:100%;
6
6
 
7
-
7
+ padding-top:30px;
8
8
 
9
- max-width:100%;
9
+
10
10
 
11
-
12
-
13
- align-items:center;
11
+ margin:0 auto;
14
-
15
-
16
12
 
17
13
  }
18
14
 
19
- #container .item {
15
+ #container .item img {
20
16
 
21
17
  background: rgb(135, 199, 135);
22
18
 
23
- width: 100%;
24
-
25
- vertical-align:middle;
26
-
27
-
28
-
29
- aspect-ratio: 4/3;
30
-
31
- }
32
-
33
- .item img{
34
-
35
- max-width:400px;
36
-
37
- width:700px;
19
+ width:300px;
38
-
39
- width:100%;
40
20
 
41
21
  height:auto;
42
22
 
43
23
  vertical-align: bottom;
44
24
 
25
+
26
+
27
+
28
+
45
29
  }
46
30
 
47
- @media screen and (min-width: 768px) {
48
31
 
49
- .item img{
50
32
 
51
-
52
-
53
-
54
-
55
- }
33
+
56
-
57
- }
58
34
 
59
35
  /*スマホ*/
60
36
 
61
37
  @media screen and (max-width: 767px) {
62
38
 
63
- .item{
39
+
64
40
 
65
- margin-bottom:461px;
66
-
67
- }
68
-
69
-
70
-
71
-
72
-
73
-
74
-
75
- .item img{
41
+ #container .item img{
76
42
 
77
43
  max-width:100%;
78
44
 
@@ -96,22 +62,30 @@
96
62
 
97
63
  /*タブレット*/
98
64
 
99
- @media only screen and (min-width: 767px) and (max-width: 1280px) {
65
+ @media screen and (min-width:768px) and ( max-width:1024px) {
100
66
 
101
- .item img{
67
+ /* 画面サイズが768pxから1024pxまではここを読み込む */
102
68
 
103
- max-width:100%;
69
+ #container {
104
70
 
71
+ flex-wrap:wrap;
72
+
105
- }
73
+ width:100%;
74
+
75
+ margin-right: -60px;
76
+
77
+
106
78
 
107
79
 
108
80
 
109
81
  }
110
82
 
111
- スマホ までやって PCとタブレットの調整はまだです。
83
+ #container .item img {
112
84
 
113
-  こんな感じですかね?
85
+ width:350px;
114
86
 
87
+ flex-wrap:wrap;
115
88
 
89
+
116
90
 
117
- 理想の形ではないかもしれません。
91
+ }