ウェブページのサイズが小さくなったときにパディングを削除する方法

Question

ページの下部に貼り付けられたウェブページにフッター要素があります。余白は225px（サイドバーのサイズ）のままですが、ウィンドウのサイズが小さくなると、ページ全体にまたがるようにこのマージンを削除したいと思います。ウィンドウサイズが小さくなるとサイドバーが崩れるようにテンプレートを使用しています。サイドバーの幅を考慮に入れて余白を手動で追加しました。

これは、大きな窓がある場合にどのように見えるかです：

私のhtmlコードは、ブートストラップを使用しています：

これは、サイドバーが消えたときに、ウィンドウを最小化したときにどのように見えるかですjquery、css、その他のテンプレートのCSSとjqueryファイル私のhtmlコードは次のようになります。

<div class="wrapper"> 
<!--contains all the content, the navbar at the top, and the sidebar --> 
</div> 
<footer class="footer" style="margin-bottom:0px; margin-left:225px;"> 
     <div class="container-fluid well" style="margin-bottom:0px"> 
     <nav class="pull-left"> 

      <ul class="list-inline"> 
      <li class="list-inline-item"><a href="www.mcmaster.ca">Home</a></li> 
      <li class="list-inline-item"><a href="#">Testing Purposes</a></li> 
      <li class="list-inline-item"><a href="http://www.google.ca">Web Support</a></li> 
      </ul> 

     </nav> 
     <p class="pull-right"> 
      &copy; 2017 <a href="www.mcmaster.ca">Sample Copyright</a> 
     </p> 
     </div> 
    </footer> 

Answer 1

メディアクエリはあなたの友達です。私が理解しているように、あなたは現在、モバイル版のデスクトップCSSを適応しようとしています。これにより、このクエリが発生します。

@media (min-width: 992px) { 
    .footer { 
     margin-left: 0; 
    } 
} 

しかしモバイル第1のアプローチは、小さな画面で開始し、唯一の大画面のためのマージンを追加することであろう。

.footer { 
    margin-left: 0; 
} 

@media (min-width: 992px) { 
    .footer { 
     margin-left: 225px; 
    } 
}