title: Bootstrap Media Queries are Not Working with Small Tablets and Landscape Mode
body: <p>I am using bootstraps standard media queries for my project, they are working perfectly except for small tablets and landscape mode. I have attached an image to show this. I'm assuming it is because I have custom css for many sections of my page ex. margin-top. My client asked to use non-square background images, so in order to center text on the background images, I had to do a lot of custom css- it's driving me mad, I've never had to deal with non-square images before. I tried to align everything within these media queries but it then affects another device in a negative way. </p>
  
  <p>Can anyone suggest how to fix this? Would I need to add additional media queries in order to make it all work perfectly? </p>
  
  <p>I'm only going to add my media query code and the price col code because I have so much code for this whole website. I am going to attach the working link to the website as well. As I said, it looks fine in mobile portrait, ipad portrait/landscape, desktop but it's not aligning in small tablet or landscape mobile. </p>
  
  <p><a href="https://intense-savannah-11242.herokuapp.com/" rel="nofollow noreferrer">Website link</a></p>
  
  <p><a href="https://i.stack.imgur.com/XrJzO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XrJzO.png" alt="enter image description here"></a></p>
  
  <pre><code>// Extra small devices (portrait phones, less than 576px)
  @media (max-width: 575.98px) { ... }
  
  // Small devices (landscape phones, 576px and up)
  @media (min-width: 576px) and (max-width: 767.98px) { ... }
  
  // Medium devices (tablets, 768px and up)
  @media (min-width: 768px) and (max-width: 991.98px) { ... }
  
  // Large devices (desktops, 992px and up)
  @media (min-width: 992px) and (max-width: 1199.98px) { ... }
  
  // Extra large devices (large desktops, 1200px and up)
  @media (min-width: 1200px) { ... }
  
  /* Extra small devices (portrait phones, less than 576px)*/
  
  @media (max-width: 575.98px) {
      .intro {
          text-align: center;
      }
      .intro1 {
          padding-top: 50px;
          font-size: 55px;
      }
      .intro2 {
          font-size: 55px;
      }
      .intro3 {
          font-size: 25px;
      }
      .jumbo_features {
          width: 80%;
      }
      #img_prev {
          display: none;
  
      }
  
      #img_next {
          display: none;
      }
      #content4 {
          margin-top: -230px;
      }
  
      .view2 {
          background-position: center;
      }
      .price_container {
          height: 100%;
          width: 90%;
          background-color: #fff;
      }
  
      .card {
          height: 670px;
          margin: 1rem;
      }
  
  
      .form-control {
          width: 275px;
      }
  
      #content6 {
          margin-top: -60px;
      }
  }
  
  /*Small devices (landscape phones, 576px and up)*/
  
  @media (min-width: 576px) and (max-width: 767.98px) {
      .view {
  
          background-repeat: no-repeat;
          background-size: cover;
          overflow: hidden;
          width: 100%;
          height: 150%;
      }
  
      .jumbo_features {
          width: 45%;
      }
  
      #img_prev {
          display: none;
  
      }
  
      #img_next {
          display: none;
      }
  
      .integration {
          margin-top: 250px;
      }
  
      .price_container {
          background-color: inherit;
      }
  
  
  }
  
  @media (min-width: 600px) and (max-width: 800px) {}
  
  /*Medium devices (tablets, 768px and up)*/
  
  @media (min-width: 768px) and (max-width: 991.98px) {
      .jumbo_features {
          width: 80%;
      }
      .view2 {
          background-position: center;
      }
      .integration {
          margin-top: 240px;
      }
  
      #content4 {
          margin-top: -350px;
      }
  
      .price_container {
          width: 95%;
      }
  
      .card {
          width: 13rem;
          height: 670px;
      }
  }
  
  /*Large devices (desktops, 992px and up)*/
  
  @media (min-width: 992px) and (max-width: 1199.98px) {
      .price_container {
          width: 90%;
      }
  
      .integration {
          margin-top: 190px;
      }
  }
  
  /*Extra large devices (large desktops, 1200px and up)*/
  
  @media (min-width: 1200px) {
      .price_container {
          background-color: #eae8f5;
          background-size: cover;
          border-radius: 30px;
          height: 750px;
          margin-top: 50px;
          justify-content: center;
          width: 80%;
      }
  
      .integration {
          margin-top: 140px;
  
      }
  }
  
  &lt;div id="content4"&gt;
      &lt;section&gt;
          &lt;h1 class="text-center"&gt;Pricing&lt;/h1&gt;
          &lt;br&gt;
          &lt;div class="container-fluid d-flex align-items-center price_container text-center"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-4 text-center"&gt;
                      &lt;div class="card"&gt;
                          &lt;div class="card-header"&gt;Educator&lt;/div&gt;
                          &lt;div class="card-body d-flex flex-column"&gt;
                              &lt;img src="img/price_edu.png" class="img-fluid"&gt;
                              &lt;h7 class="card-title"&gt;&lt;b&gt;Use Wanzeru Ed&lt;/b&gt;&lt;/h7&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;FREE for ONE class&lt;/li&gt;
                                  &lt;li&gt;Matches students into ideal teams&lt;/li&gt;
                                  &lt;li&gt;Real-time feedback&lt;/li&gt;
                              &lt;/ul&gt;
                              &lt;button type="button" class="btn mt-auto btn-block" style="background-color: #2F8EE1; color:#fff; bottom:5px;"&gt;Get Quotes&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-4 text-center"&gt;
                      &lt;div class="card"&gt;
                          &lt;div class="card-header"&gt;Individual&lt;/div&gt;
                          &lt;div class="card-body d-flex flex-column"&gt;
                              &lt;img src="img/price_indi.png" class="img-fluid"&gt;
                              &lt;h7 class="card-title"&gt;&lt;b&gt;Hire Wanzeru to be your meeting (Find word)&lt;/b&gt;&lt;/h7&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;$9.99/month&lt;/li&gt;
                                  &lt;li&gt;Schedules unlimited meetings&lt;/li&gt;
                                  &lt;li&gt;Facilitates unlimited meetings&lt;/li&gt;
                                  &lt;li&gt;Takes meeting notes&lt;/li&gt;
                                  &lt;li&gt;Assigns meeting tasks&lt;/li&gt;
                                  &lt;li&gt;Sends reminders&lt;/li&gt;
                                  &lt;li&gt;Digital badging for skills&lt;/li&gt;
                              &lt;/ul&gt;
                              &lt;button type="button" class="btn mt-auto btn-block" style="background-color: #2F8EE1; color:#fff;"&gt;$9.99/ month&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-4 text-center"&gt;
                      &lt;div class="card"&gt;
                          &lt;div class="card-header"&gt;Business&lt;/div&gt;
                          &lt;div class="card-body d-flex flex-column"&gt;
                              &lt;img src="img/price_entur.png" class="img-fluid"&gt;
                              &lt;h7 class="card-title"&gt;&lt;b&gt;Hire Wanzeru for your business team&lt;/b&gt;&lt;/h7&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;Schedules all team meetings&lt;/li&gt;
                                  &lt;li&gt;Facilitates every meetings&lt;/li&gt;
                                  &lt;li&gt;Takes meeting notes&lt;/li&gt;
                                  &lt;li&gt;Assigns meeting tasks&lt;/li&gt;
                                  &lt;li&gt;Sends reminders&lt;/li&gt;
                                  &lt;li&gt;Digital badging for skills&lt;/li&gt;
                                  &lt;li&gt;Provides real time progress reports of each team&lt;/li&gt;
                                  &lt;li&gt;Fully compliant with each business data policy&lt;/li&gt;
                              &lt;/ul&gt;
                              &lt;button type="button" class="btn mt-auto btn-block" style="background-color: #2F8EE1; color:#fff;"&gt;Get Quotes&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  </code></pre>