title: need help making website responsive
body: <p>everyone! I'm currently doing some free work for a friend of mine to contribute to my portfolio and keep me on my feet learning.</p>
  
  <p>Everything is going great and looking great, but unfortunately, I'm having a lot of trouble trying to make some of the content responsive. I'm using the Bootstrap grid framework.</p>
  
  <p>Alright so here's my CSS for the background which also needs to be responsive.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.boxmain {
    background-color: white;
    width: 100%;
    height: 400px;
    background-size: cover;
    max-width: 100%
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>That's a white box I've created as kind of like a sub-background that covers my main background image.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>}
  .video {
    padding-top: 30px;
  }
  .underh {
    font-family: 'Oxygen', sans-serif;
    font-weight: 100;
    font-size: 22px;
    padding-top: 33px;
    margin-left: 20px;
    max-width: 100%;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>That's the CSS for the content inside the box which is a paragraph and an embedded Facebook video.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="boxmain"&gt;
              &lt;div class="container-fluid"&gt;
                 &lt;div class="row"&gt;
                    &lt;div class="col-xs-6"&gt;
                       &lt;div class="video"&gt;
                       &lt;/div&gt;
                       &lt;iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Feyeofthestormpro%2Fvideos%2F638067739703491%2F&amp;show_text=0&amp;width=560" width="560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"&gt;&lt;/iframe&gt;
                     &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="col-xs-6"&gt;
                       &lt;p class="underh"&gt;Eye of the Storm Productions is an entertainment business dedicated to its involvement in the electronic music scene.
                          We offer a large range of services to  the underground electronic music scene and pride ourselves on the work that we do.
                          We offer our own selection of the best aspiring young DJs/Producers and photographers/cinematographers, as well as professionally run stage management solutions.
                          We have also partnered with Fulcrum Designs and Staging, to bring you the best in stage design and construction.  Including custom shade sail installation and VJ services.
                       &lt;/p&gt;
                    &lt;/div&gt;
                 &lt;/div&gt;
               &lt;/div&gt;
              &lt;/div&gt;
           &lt;/div&gt;
           &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>That's the HTML.
  I would like to learn how to make this mobile friendly / responsive thank you!</p>