質問編集履歴
2
670pxの規定理由と、CSSのwidth、marginの改変 縦方向の反映の確認と新たな質問を追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
JavaScriptで簡単なクイズゲームを作り、GITHUBから公開しました。
|
|
2
|
-
PCでは問題なく起動するのですが、スマホのように画面が縦長になると、本来横並びに設定している選択肢ボタンの中の文字がみづらくなるので、＠media(max-width:670px)の時に縦並びになるよう設定しましたが反映されません。
|
|
2
|
+
PCでは問題なく起動するのですが、スマホのように画面が縦長になると、本来横並びに設定している選択肢ボタンの中の文字がみづらくなるので、＠media(max-width:670px)(※Progate上級コースのスマホ版のwidthを参照)の時に縦並びになるよう設定しましたが反映されません。
|
|
3
3
|
|
|
4
4
|
もともとスタイルシートを外部サイトから引用し、その後に自作のCSSファイルで書き加えたせいなのか、他に理由があるのか分かりません。どのようにすれば、ボタンを縦並びに変えることができるでしょうか。
|
|
5
|
+
|
|
6
|
+
追記：縦方向に改変することはできました。 あとは、ボタンを中央揃え、もしくは画面いっぱいに横に広げるといったCSSを加えたいです。
|
|
5
7
|
```HTML
|
|
6
8
|
<!doctype html>
|
|
7
9
|
<html class="no-js" lang="">
|
|
@@ -62,11 +64,11 @@
|
|
|
62
64
|
```CSS
|
|
63
65
|
@media(max-width:1000px) {
|
|
64
66
|
#js-items {
|
|
65
|
-
width: 100%
|
|
66
67
|
flex-direction:column;
|
|
67
68
|
}
|
|
68
69
|
.m-2 button {
|
|
70
|
+
width: 100%
|
|
69
|
-
margin
|
|
71
|
+
margin: 0 auto;
|
|
70
72
|
}
|
|
71
73
|
}
|
|
72
74
|
```
|
1
link relの閉じタグを追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
|
|
23
23
|
<!-- CSS only -->
|
|
24
24
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
|
|
25
|
-
<link rel="stylesheet" href="style.css"
|
|
25
|
+
<link rel="stylesheet" href="style.css">
|
|
26
26
|
|
|
27
27
|
<meta name="theme-color" content="#fafafa">
|
|
28
28
|
</head>
|