Q&A
文章での説明が難しいのですが、
最大化した画面では自分の思った配置で表示されていて
縮小化したときも一見問題がないように見えるのですが、
横にスクロールした時に、横幅いっぱいに広がっていてほしい内容のほとんどが
縮小化された画面幅に縮小されてしまいます
やりたいこと
最小化したサイズに影響されず原寸の通りに内容を表示させ、
見えない部分はスクロールで見えるようにしたい
2枚目の画像が、縮小化して一番右までスクロールした状態です
最大化している1枚目の画像のように、薄緑色の帯状の背景も犬の写真もその他も、
右端いっぱいまで伸ばしたいです
試したこと
bodyにwidth:1349px;を指定したら私のパソコンでは直りますが、
当然ですが検証して画面サイズを変えた時に余白ができたので今は何も指定していません
うまく説明できず申し訳ありませんがご協力よろしくお願いします
html
1<body> 2<div class="rogo-frame"> 3<a href="index.html"><img src="./rogo/top.png" class="rogo" alt="ロゴ"></a> 4<div class="sentence"> 5大阪に住むわんちゃんの訪問しつけ</div> 6<div class="info">営業時間 10：00~17：00<br>定休日:木曜日 7<a href="tel:"><div class="tel"></div></a></div></div> 8 9<img src="./image/banner.JPG" class="banner"alt="KIRIのトップ画像">
css
1body 2{background-image:url(../image/bgimg.png); 3background-repeat:repeat; 4background-size:210px; 5background-position:center; 6padding:0; 7margin:0; 8font-family:"ヒラギノ角ゴ Pro W3", 9"Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", 10"MS PGothic", sans-serif;} 11 12ul{list-style-type:none;} 13 14.rogo-frame{background-color:rgb(228, 243, 245); 15height:90px; 16width:100%; 17position:relative; 18display:flex;} 19 20img.rogo{position:absolute; 21top:8px; 22left:590px; 23width:185px;} 24 25.sentence{position:absolute; 26top:65px; 27left:10px; 28font-size:15px;} 29 30.info{position:absolute; 31top:15px; 32right:0; 33font-size:15px; 34width:200px; 35line-height:23px;} 36 37@media(min-width:768px){a[href^="tel:"]{pointer-events:none;}} 38 39.tel{position:absolute; 40top:48px; 41left:0px; 42font-weight:bold; 43font-size:23px; 44color:brown; 45width:210px;} 46 47.banner{position:absolute; 48left:0px; 49top:90px; 50width:100%; 51height:290px;} 52 53img.banner-img{width:100%; 54height:230px;}
追記
修正しました
回答1件
0
ベストアンサー
こんばんは。
とりあえず、以下のようにするとどうですか？
css
1.info{position:absolute; 2top:15px; 3/*left:1100px; 削除*/ 4right:0px; /*追加*/
投稿2021/02/13 09:07
総合スコア36946
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2021/02/13 12:24
2021/02/13 13:53