重要なタグが多すぎるモバイルビューのワイドマージ

Question

私のウェブサイトのCSSに問題があります。デスクトップビューでは正常に見えますが、モバイルビューではサイドバーを歪ませる大きな右マージンがあります。ここにページへのリンクがあります。 https://www.bearcountrybees.com/store/

あなたが私がそれを修正するために何をすべきかについての意見があれば、それはすばらしいでしょう。ありがとう！

Answer 1

あなたはそれを携帯の画面を100％とすると、我々はimportant以上を使用する必要がありますそれらを上書きするimportant原因を利用するのは避けるべきimportantとラッパー幅「s.Likeの値を設定しているので、それはおそらくです、

@media only screen and (max-width: 767px) { 
.bSe right, 
.sAsCont .sAs { 
    width: 100%; 
} 
} 

importantつまり、

@media only screen and (max-width: 767px) { 
.bSe right, 
.sAsCont .sAs { 
    width: 100% !important; 
} 
} 

Answer 2

あなたのウェブサイトでは、BootStrapのようなフレームワークを使用していません。次回からは、フレームワークを使用してください、それはあなたのための多くの問題を解決します。

このようなモバイル画面でサイドバーを全幅に広げることができます。あなたは.bSeCont .bSeに適用され、あまりにも多くの幅を持っていた

@media only screen and (max-width: 767px) { 
.sAs { 
    width: 100% !important; 
} 
} 

Answer 3

、CSSを行うための最善の方法はあなたのためです、最後の一つは、あなたのページが上の大きなマージンを持つことになりましたルール右は.bSeCont .bSe {幅：67％！重要; }これを修正する1つの方法は、あなたのCSSでそれを上書きできるようにすることです。これを試してみてください...

.cnt .bSeCont .bSe.right { width: 100%!important; }