モバイル デバイスで厄介な横スクロールが見られます。タブレットとモバイルの 2 つの @media クエリを設定しています。
@media only screen and (max-width: 767px) {
.wrap { max-width: 300px; }
これは問題ですか？パーセンテージを使用するなど、これを行うためのより良い方法はありますか?
3 番目の @media クエリを追加して、より具体的なパーセンテージを設定する必要がありますか? 現在、かなり広いブレーク ポイントが 2 つだけあります。
あなたのコードを確認<div id="sidebar-footer" class="sidebar">
しました この要素の正確な幅は何ですか? ビューポート 100% を超える幅を使用しました。
#sidebar-footer {
clear: both;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top: 0;
overflow-x: visible;
overflow-y: visible;
width: 104.255%;
}
104.255% の代わりに 100% を使用します。それはそれでうまくいきます。
フォローアップの質問です。767px より下に別の #media スクリーン ブレーク ポイントを追加する価値があると個人的に思いますか? たとえば、古いモバイルと iPhone の場合は 320px ですか?