Q&A
スマホ,PCともにcontainerにwidth: 100%;
を設定しています。
mainvisualは画面いっぱいに広げて、
menu-btnでハンバーガーメニューを右上にposition:fixedで表示させます。
問題は、mainvisualをアニメーションで少し回転させたいので、縁が見えないようにmainvisualを拡大するのですが、
そうするとおそらくその分containerの幅が広がってしまうためか右に空白ができてしまいます。
PCだと上記の事象は起きないのですがスマホだけで起きます。
なんとか防ぐ方法はないでしょうか。
html
1<body> 2<div class="container"> 3 <div class="mainvisual"> 4 <img src="" alt=""> 5 </div> 6 <div class="menu-btn"> 7 </div> 8 <main> 9 </main> 10</div> 11</body>
css
1.mainvisual { 2width: 100vw; 3height: 100vh; 4transform: scale(1.3); 5} 6 7.menu-btn { 8 position: fixed; 9 top: 10px; 10 right: 10px; 11}
回答1件
0
css
1.container{ 2 overflow: hidden; 3}
としてはどうでしょう。
投稿2021/08/09 13:26
総合スコア1293
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。