###前提・実現したいこと
サイト作成の時間がなく、急遽bootstrapのテンプレートを使用しております。
画像や情報を入力し終えたところで、MacのSafariの「レスポンシブ・デザイン・モードにする」にて確認したとことスマホ表示も問題なさそうでしたが、実機で確認するとPCの横幅で表示されているようでした。
@media screenなのか、@media device...なのかそのあたりの問題かと思いましたが、時間もない中焦っており原因を見つけることができず...ご教示いただければと思います。
###発生している問題・エラーメッセージ
PCで確認したところレスポンシブ対応で問題なさそうだったが、実機だとずれている。 https://readytheme.net/demo/cluster/ こちらのテンプレートです。
###該当のソースコード
css/responsive.css内に含まれている、
CSS
1/* lg */ 2@media (min-width: 1200px) { 3 4} 5 6/* md */ 7@media (min-width: 992px) and (max-width: 1199px) { 8 9 #home-carousel .item { 10 height: 500px; 11 } 12 13 .carousel-caption h1 { 14 font-size:26px; 15 margin-bottom:0; 16 line-height:27px; 17 letter-spacing:2px; 18 font-weight:100; 19 } 20 21 .carousel-caption h2 { 22 font-size:51px; 23 font-weight:600; 24 margin-top:0px; 25 text-transform:lowercase; 26 letter-spacing:2px; 27 margin-bottom:20px; 28 } 29 #our-team, #pricing, #our-works, #services, #contact{ 30 padding-top: 110px; 31 padding-bottom: 100px; 32 } 33 34}
レスポンシブの設定の問題で画面横幅のピクセル数とデバイスの画面幅でズレが出ているのかと...
###試したこと
下記に書き換えてみました。@mediaから@media screen and...
CSS
1/* lg */ 2@media screen and (min-width: 1200px) { 3 4} 5 6/* md */ 7@media screen and (min-width: 992px) and (max-width: 1199px) { 8 9 #home-carousel .item { 10 height: 500px; 11 } 12 13 .carousel-caption h1 { 14 font-size:26px; 15 margin-bottom:0; 16 line-height:27px; 17 letter-spacing:2px; 18 font-weight:100; 19 } 20 21 .carousel-caption h2 { 22 font-size:51px; 23 font-weight:600; 24 margin-top:0px; 25 text-transform:lowercase; 26 letter-spacing:2px; 27 margin-bottom:20px; 28 } 29 #our-team, #pricing, #our-works, #services, #contact{ 30 padding-top: 110px; 31 padding-bottom: 100px; 32 } 33 34}
かなり投げやりな質問となってしまっているかと思いますが、
当方Webページの制作は初心者でして、調べてはおりますが、
解決策が見当たらず、明日オープンするとの話も出ておりますので焦りでまともに手に付きません...
ご教示よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/08/07 04:38