黒い網掛けの上に文字を乗せる記述を作成していて、
下記css記述の「overlay」で網掛けの指定、「slider-text」で
テキストボックスの大きさなどの指定と文字装飾を指定しています。
その上で、メディアクエリを使用して画面の大きさに応じて
指定内容を変えたいのですが、
slider-textの1200px以上
(@media screen and (min-width: 1200px) {
.slider-text {))だけが認識されない
(chromeを使用していますが、「検証」機能の「styles」上に出現しない)
状況です。
他の記述(overlayや、1200px未満のslider-text)は画面の大きさを変えるに応じて
認識され、画面(検証のところにも、サイトの見た目にも)に反映されます。
なぜでしょうか?
<指定したい条件>
画面が992px未満:網掛けは必要なく、文字の装飾のみ行う
画面が992px~1200px:網掛け(横450px)と文字の装飾を行う
画面が1200px以上:網掛け(横630px)と文字の装飾を行う
<該当のCSS>
@media screen and (max-width: 1200px) and (min-width: 992px) { .overlay { position: absolute; width: 450px; height: 230px; top: 230px; bottom: 35px; left: 20px; right: 50%; background: rgba(0, 0, 0, 0.3); z-index: 50; } } @media screen and (min-width: 1200px) { .overlay { position: absolute; width: 630px; height: 230px; top: 230px; bottom: 35px; left: 20px; right: 50%; background: rgba(0, 0, 0, 0.3); z-index: 50; } } @media screen and (max-width: 992px) { .slider-text { text-align: center; position: absolute; top:240px; left:35px; right:470px; margin: 0; padding: 0; height: 200px; bottom: 40px; z-index: 100; color: white; font-family :"Times New Roman", "游明朝", YuMincho,"ヒラギノ明朝 Pr6 W6","Hiragino Mincho Pro", "HGS明朝E","メイリオ", "MS P明朝","MS PMincho",Meiryo, serif; } } @media screen and (max-width: 1200px) and (min-width: 992px) { .slider-text { position: absolute; top:240px; left:35px; right:470px; margin: 0; padding: 0; height: 200px; width: 420px; bottom: 40px; z-index: 100; color: white; font-family :"Times New Roman", "游明朝", YuMincho,"ヒラギノ明朝 Pr6 W6","Hiragino Mincho Pro", "HGS明朝E","メイリオ", "MS P明朝","MS PMincho",Meiryo, serif; } @media screen and (min-width: 1200px) { .slider-text { position: absolute; top:240px; left:35px; right:470px; margin: 0; padding: 0; height: 200px; width: 570px; bottom: 40px; z-index: 100; color: white; font-family :"Times New Roman", "游明朝", YuMincho,"ヒラギノ明朝 Pr6 W6","Hiragino Mincho Pro", "HGS明朝E","メイリオ", "MS P明朝","MS PMincho",Meiryo, serif; } }
回答2件
あなたの回答
tips
プレビュー