title: how to make jumbotron responsive
body: <p>I have an image inside the jumbotron when the browser reaches mobile view, the jumbotron is below the image and the image decreases in size the image is suppose to be responsive as it is but i cant seem to make the jumbotron decrease in height when in mobile view.</p>
  
  <p><a href="https://codepen.io/Abdelrahmanyassin/pen/MWaVwpq" rel="nofollow noreferrer">https://codepen.io/Abdelrahmanyassin/pen/MWaVwpq</a></p>
  
  <pre><code>&lt;style type="text/css"&gt;
    .card {
      box-shadow: 20px 20px 50px 10px #888888;
    }
  
    .jumbotron {
      width: 100%;
      padding-top: 47rem;
      background-size: 100% ;
    }
  
    .jumbotronheader {
      background-image: url("C:/Users/abdul/OneDrive/Desktop/Moataz/Designs/Enterprize Innovation Audit Main Elements.png");
      background-repeat: no-repeat;
    }
  &lt;/style&gt;
  
  &lt;div class="jumbotron jumbotronheader " style=" width:100%; height: 54rem; "&gt;
    &lt;container&gt;
      &lt;h1 class=" jumbo display-auto"&gt;&lt;/h1&gt;
      &lt;p class=" jumbo lead"&gt;&lt;/p&gt;
      &lt;hr class="my-4"&gt;
      &lt;p&gt;&lt;/p&gt;
  
      &lt;div class="dropdown"&gt;
        &lt;div class="d-flex align-items-end"&gt;
          &lt;button class="btn btn-primary dropbtn pull-right"&gt;Download&lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="dropdown-content"&gt;
          &lt;a href="#"&gt;A0&lt;/a&gt;
          &lt;a href="#"&gt;A1&lt;/a&gt;
          &lt;a href="#"&gt;A2&lt;/a&gt;
          &lt;a href="#"&gt;A3&lt;/a&gt;
          &lt;a href="#"&gt;A4&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/container&gt;
  &lt;/div&gt;
  </code></pre>