質問編集履歴

2

responsivecss768pxの追加

2020/06/16 22:16

投稿

19941224ngng
19941224ngng

スコア19

test CHANGED
File without changes
test CHANGED
@@ -222,6 +222,36 @@
222
222
 
223
223
  ```
224
224
 
225
+ ```responsivecss768px
226
+
227
+ .footer {
228
+
229
+ height: 35vh;
230
+
231
+ }
232
+
233
+
234
+
235
+ .sns-container {
236
+
237
+ font-size: 12px;
238
+
239
+ }
240
+
241
+
242
+
243
+ .fa-facebook-square {
244
+
245
+ position: relative;
246
+
247
+ top: 0;
248
+
249
+ left: 0;
250
+
251
+ }
252
+
253
+ ```
254
+
225
255
  ```responsivecss375px
226
256
 
227
257
  .footer {

1

すみません、html、cssコードで表示し忘れていた部分がありましたので、追加いたしました。

2020/06/16 22:16

投稿

19941224ngng
19941224ngng

スコア19

test CHANGED
File without changes
test CHANGED
@@ -90,6 +90,22 @@
90
90
 
91
91
  </div>
92
92
 
93
+ <div class="responsive-footer-texts">
94
+
95
+ <p class="responsive-footer-text">
96
+
97
+ 〒891-4407<br>
98
+
99
+ 鹿児島県熊毛郡屋久島町湯泊211-53<br>
100
+
101
+ 080-3187-8533<br>
102
+
103
+ iroha.yakushima108@gmail.com
104
+
105
+ </p>
106
+
107
+ </div>
108
+
93
109
  </footer>
94
110
 
95
111
  ```
@@ -194,76 +210,64 @@
194
210
 
195
211
  }
196
212
 
213
+
214
+
215
+ .responsive-footer-texts {
216
+
217
+ display: none;
218
+
219
+ }
220
+
221
+
222
+
197
223
  ```
198
224
 
199
- ```responsivecss768px
225
+ ```responsivecss375px
200
-
226
+
201
- .footer {
227
+ .footer {
202
-
228
+
203
- height: 35vh;
229
+ position: relative;
204
230
 
205
231
  }
206
232
 
207
233
 
208
234
 
209
- .sns-container {
235
+ .footer-logo {
236
+
210
-
237
+ width: 75%;
238
+
211
- font-size: 12px;
239
+ position: absolute;
240
+
241
+ top: 25%;
242
+
243
+ left: 50%;
244
+
245
+ transform: translate(-50%, -50%);
212
246
 
213
247
  }
214
248
 
215
249
 
216
250
 
217
- .fa-facebook-square {
251
+ .footer-content {
218
-
252
+
219
- position: relative;
253
+ display: none;
220
-
221
- top: 0;
222
-
223
- left: 0;
224
254
 
225
255
  }
226
256
 
227
257
 
228
258
 
259
+ .responsive-footer-texts {
260
+
261
+ display: block;
262
+
263
+ position: absolute;
264
+
229
- .copyright {
265
+ top: 70%;
266
+
230
-
267
+ left: 50%;
268
+
269
+ transform: translate(-50%);
270
+
231
- font-size: 6px;
271
+ text-align: center;
232
-
233
- }
234
272
 
235
273
  ```
236
-
237
- ```responsivecss375px
238
-
239
- .footer {
240
-
241
- position: relative;
242
-
243
- }
244
-
245
-
246
-
247
- .footer-logo {
248
-
249
- width: 75%;
250
-
251
- position: absolute;
252
-
253
- top: 25%;
254
-
255
- left: 50%;
256
-
257
- transform: translate(-50%, -50%);
258
-
259
- }
260
-
261
-
262
-
263
- .footer-content {
264
-
265
- display: none;
266
-
267
- }
268
-
269
- ```