Q&A
間違ってはないですよ。テレビとかプリンターとかでの表示も想定してるんじゃないですか？
寧ろ改修後のコードがpxのtypoしてるので動かないので修正してあげたほうがいいかもです。
確かにscreenは付けない方が見ないですけどね！
background-image上のテキストが画面の幅を変えると下の画像のようにはみ出してしまいます。テキストを収める方法を知りたいです。
html
1<body> 2 <header> 3 <div id="header-nav"> 4 <div id="header-left"> 5 <img src="https://isara.life/wp-content/themes/isara_v2/img/isaralogo.png" alt="" width="115px" height="43px"> 6 <h3>バンコクのノマドエンジニア育成講座</h3> 7 </div> 8 <div id="header-right"> 9 <p>お問い合わせ / 資料請求はこちら</p> 10 </div> 11 <div id="header-right2"> 12 <span><img src="https://isara.life/wp-content/themes/isara_v2/img/form.png" alt="" width="20px" height="25px" ></span> 13 <p><a href="">資料請求</a></p> 14 </div> 15 </div> 16 </header> 17 <main> 18 <div id="main-image1"> 19 <div id="main-content1"> 20 <h2>プログラミングで<br>人生の安定を手にいれよう</h2> 21 <img src="https://isara.life/wp-content/themes/isara_v2/img/isaralogo.png" alt="" width="317px" height="111px"> 22 <h3>バンコクのノマドエンジニア育成講座<br>iSara[イサラ]</h3> 23 </div> 24 </div> 25コード
css
1*{ 2 box-sizing: border-box; 3} 4 5#header-nav{ 6 padding:20px 50px; 7 display: flex; 8} 9 10#header-left{ 11 display: flex; 12 align-items:flex-end; 13} 14 15#header-left h3{ 16 color:#333333; 17 font-size: 14px; 18 margin-bottom: 5px; 19 margin-left: 5px; 20} 21 22#header-right{ 23 margin-left: auto; 24 /* border: 1px solid #333333; */ 25 background-color: #da6b64; 26 border-radius: 30px; 27 padding:10px 40px; 28 color:white; 29} 30 31#header-right2{ 32 display: none; 33} 34 35#header-right:hover{ 36 background-color: tomato; 37} 38 39#header-right p{ 40 margin-top: 5px; 41 font-size: 14px; 42} 43 44#main-image1{ 45 width: 100%; 46 height:500px; 47 background-image: url(https://isara.life/wp-content/themes/isara_v2/img/main.jpg); 48 background-repeat: no-repeat; 49 background-size: cover; 50 51 52} 53 54#main-content1{ 55 text-align: center; 56 padding-top: 100px; 57 58} 59 60 61#main-content1 h2{ 62 font-size: 28px; 63 line-height: 50px; 64 letter-spacing: 3px; 65 color:#333333; 66 67} 68 69#main-content1 h3{ 70 font-size: 20px; 71 margin-top: 30px; 72 letter-spacing:3px; 73 color: #333333; 74} 75
css
1@media (max-width:764px){ 2 3 #header-nav{ 4 padding:0px; 5 } 6 7 #header-left{ 8 flex-direction: column-reverse; 9 align-items: stretch; 10 padding:10px 10px; 11 } 12 13 #header-left h3{ 14 font-size: 10px; 15 } 16 17 #header-right{ 18 display: none; 19 } 20 21 #header-right2{ 22 display: block; 23 margin-left: auto; 24 width: 78px; 25 height: 65px; 26 background-color: #da6b64; 27 padding:5px; 28 padding-top:10px; 29 text-align: center; 30 } 31 32 #header-right2 p{ 33 font-size: 12px; 34 color: white; 35 letter-spacing: 2px; 36 } 37 38 #header-right2 p a{ 39 text-decoration: none; 40 color: white; 41 } 42 43 #main-image1{ 44 background-image: url(https://isara.life/wp-content/themes/isara_v2/img/mainsp.jpg); 45 background-size: cover; 46 height: 500px; 47 } 48 49 #main-content1{ 50 padding-top: 0px; 51 } 52コード
試したこと
・余計なmarginやpaddingがないか調べたがなかった。
・ちゃんと#main-image1のなかに#main-content1は収まっていた。
回答2件
0
sp用の背景画像の上縁に白い余白があるから
画像の余白を取り除くか、contentの上方に幅を持たせるかで直す。
投稿2020/02/14 05:53
総合スコア683
0
はじめまして。
CSS拝見しましたが、メディアクエリの書き方が間違ってませんか？
このように書かれてますが、
css
1@media (max-width:764px){ 2
こうだと思います。
css
1@media screen and (max-width: 764px) {
一度試してみてください。
修正
ご指摘通り、メディアクエリの構文は間違っておりませんでした。
いい加減な投稿をしてしまい、失礼しました！
投稿2020/02/14 06:56
編集2020/02/14 08:38
総合スコア6
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/02/14 06:36
2020/02/14 07:43