PCでは意図した通りにCSSが効くのですが、スマートフォンで表示した場合に一部のCSSのみが効いてくれません。
ブラウザはPC、スマホ共にChrome, Safariで確認しています。
なお、PCで要素の検証→スマホの画面に切り替えた場合はきちんと効きます。
効かない部分を具体的に申し上げると、ユーザー登録画面の登録ボタンの背景色です。
その部分のHTML及びCSS
HTML
1<div class="actions"> 2 <%= f.submit "登録", style: "background-color: #80CACA;" %> 3</div>
CSS
1form input[type="submit"] { 2 background-color: #80CACA; 3 border-radius: 20px; 4 color: #fff; 5 border: 0; 6 font-size: 18px 7}
以下、PCのChromeで確認した正規の表示です。
↓PC
↓スマホ
以下、スマホのChromeで確認したときでcssが効いていないものです。
ご覧の通り、背景色が薄くなっており、上記HTML内で指定しても効きません。
どなたか、よろしくお願いいたします。。。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/17 03:24
2018/08/17 06:01