0

レスポンシブでmax-widthは390pxです。

.header_innerにposition:fixedをかけると横幅が右にはみ出してしまいます。
(fixedをかける前は収まっていた)
更にスクロール時に要素全体が固定されず半分になってしまいます。
(上に少し移動してしまう)

レスポンシブの確認方法はGooglecharmの検証ツールを使っています。

下記レスポンシブのcssです。
ご教授いただけますと幸いです。

html

<header>
 <div class="header_inner>
  <div class="header_container">
   <div></div>
   <div></div>
  </div>
 </div>
</header>

css

header .header_inner {
  width: 100%;
  height: auto;
  padding: 2%;
  background: #F1F0F5;
  transition: 1s;
  position: fixed;
  top: 10px;
  z-index: 999;
}

.header_container {
  display: flex;
  justify-content: space-between;
  max-width: 390px;
  margin: 0 auto;
}

1 件の回答 1

0

positionは基本top bottom left rightのうち2つを組み合わせて使用するものだと思いますので、

①header .header_innerにleft:0;を追加

また、ボックスのサイズにpaddingとborderを含めるかという設定をするために
(今だと要素の中にpaddingを含めない設定になっているため、paddingつけた分はみ出してしまっている)


*, *::before, *::after {
box-sizing: border-box;
}

を追加。(すべての要素に対して設定しとくとよいです。)

以下、参考サイトです。
https://webtan.tech/how-to-box-sizing/

参考になれば幸いです。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。