前提・実現したいこと
初めてHTML&CSSでランディングページを作っている初心者です。
レスポンシブデザイン、viewportについてお聞きしたいです。
発生している問題・エラーメッセージ
PC版を作り終え、レスポンシブデザインでスマホ用・タブレット用を制作する際に問題が発生しております。
ChromeのF12でスマホ用のプレビューを見ているのですが、viewportを設定すると、スマホ画面の左3分の1にしか表示されません。
縦長に表示され、レイアウトも崩れています。
ネットで調べた方法を試すと、変化がないかもしくは画面の左側が拡大されてしまいます。
widthはすべて100%に設定しています。
該当のソースコード
<meta name="viewport" content="width=device-width,initial-scale=1"> ```ここに言語を入力 コード ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>--</title> <link rel="stylesheet" href="stylesheet.css"> </head> <body> <div class="main-wrapper"> <div class="container"> <div class="copy"> <h1>ーー</h1> </div> <img src="aa.png" class="aa"> <div class="points"> <div class="point"> <span class="sircle"></span> <h2 class="sircle-po">ーー</h2> </div> <div class="point"> <span class="sircle"></span> <h2 class="sircle-po">ーー</h2> </div> <div class="point"> <span class="sircle"></span> <h2 class="sircle-po">ーー</h2> </div> </div> </div> </div> <body> </html> ``````ここに言語を入力 ```css body { margin: 0; font-family: "Hiragino Kaku Gothic ProN"; } html,body{ width: 100%; } .img { vertical-align:bottom; } h1 { font-size: 80px; color: #111e3e; } p { font-size: 16px; color: #111e3e; } .container { width: 100%; max-width: 1040px; padding: 0 15px; margin: 0 auto; } * { box-sizing: border-box; } .main-wrapper { margin-top: 60px; background-color: green; background-size: cover; position: relative; vertical-align: bottom; width: 100%; } .aa { display: inline-block; height: 100%; position: absolute; bottom: 0%; left: 50%; } .span { display: block; } .copy h1 { font-size: 46px; color: #111e3e; padding-top: 100px; } .copy span { font-size:80px; } .sircle { display: inline-block; width: 185px; height: 185px; border-radius: 50%; background-color: #111e3e; } .sircle-po { position: absolute; text-align: center; color: white; display: inline-block; left: 0; top: 0; width: 185px; font-weight: normal; } .points { padding: 130px 0 300px 0; } .point { float: left; margin: 0 30px; position: relative; }
試したこと
・width=device-widthを消す
・bodyをdivで囲み、overflow: hidden;をかける
・各wrapperにoverflow: hidden;をかける
・containerにoverflow: hidden;をかける
どこのコードを乗せればよいかわからず、viewportのみの記載となってしまい、申し訳ございません。
追記すべき所があればご教授いただきたいと思います。
よろしくお願いいたします。
あなたの回答
tips
プレビュー