title: How to make big squares responsive for widths below 1200px?
body: <p>I have a problem making this section responsive and cannot find a proper solution. As you can see I am using Bootstrap and I gave a height and width of 584px to each of the four big squares (because I cut my photos to fit this design). Everything works fine at widths above 1200px but for widths below 1200px the design falls apart. I somehow managed to make it work at 360px and 480px but for other widths in between and below 1200px my design doesn't look good (as you can see on the lower photo, that's screenshot at 1183px). I tried to give percentages to at least center everything but unsuccessfully. Not sure if my decision to give height and width of 584px to big squares was a good idea but if anyone could help me to make it look nice for all resolutions below 1200px it would really save me of a giant headache. Thanks all for reading and helping!</p>
  
  <p>Here is a screenshot of what my design looks like at above 1200px and that's ok:
  <a href="https://i.stack.imgur.com/FonAx.jpg" rel="nofollow"><img src="https://i.stack.imgur.com/FonAx.jpg" alt="enter image description here"></a></p>
  
  <p>Here is at below 1200px (it is not centered, sticks to the left):
  <a href="https://i.stack.imgur.com/lK3Oz.jpg" rel="nofollow"><img src="https://i.stack.imgur.com/lK3Oz.jpg" alt="enter image description here"></a></p>
  
  <p>Here is below 480px (it is outside of screen width):
  <a href="https://i.stack.imgur.com/zKZbV.jpg" rel="nofollow"><img src="https://i.stack.imgur.com/zKZbV.jpg" alt="enter image description here"></a></p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;!-- S Q U A R E S   S E C T I O N --&gt;
  &lt;section id="squares"&gt;
      &lt;div class="container"&gt;
  
          &lt;div class="row squares"&gt;
              &lt;div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 box-one no-padding"&gt;
                  &lt;div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 photo-box"&gt;
                      &lt;img src="img/squares/teacup.jpg" class="img-responsive" alt=""&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center text-box border-0"&gt;
                      &lt;img class="icon" alt="" src="img/icons/1.png"&gt;
                      &lt;h3&gt;TEA POT&lt;/h3&gt;
                      &lt;p&gt;A teapot is a vessel used for steeping tea leaves or an herbal mix in boiling or near-boiling water, and for serving the resulting infusion which is called tea. It makes the difference between good and great tea.
                      &lt;/p&gt;
                      &lt;p class="hide-text"&gt;Teapots usually have an opening with a lid at their top, where the dry tea and hot water are added, a handle for holding by hand and a spout through which the tea is served.
                      &lt;/p&gt;
                      &lt;p class="hide-text"&gt;The teapot was invented in China during the Yuan Dynasty. The size reflects the importance of serving single portions so that the flavours can be better concentrated and controlled, then repeated.&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 box-two no-padding"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 photo-box-small"&gt;
                          &lt;img src="img/squares/greentea.jpg" class="img-responsive" alt=""&gt;
                      &lt;/div&gt;
                      &lt;div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center text-box-small border-1"&gt;
                          &lt;img class="icon" alt="" src="img/icons/2.png"&gt;
                          &lt;h3&gt;TEA BAG&lt;/h3&gt;
                          &lt;p&gt;A small, porous, sealed bag containing tea, which is immersed in boiling water to make a hot drink.&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="row"&gt;
                      &lt;div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center text-box-small-1"&gt;
                          &lt;img class="icon" alt="" src="img/icons/3.png"&gt;
                          &lt;h3&gt;MATCHA&lt;/h3&gt;
                          &lt;p&gt;A finely ground powder of specially grown and processed green tea.&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 photo-box-small"&gt;
                          &lt;img src="img/squares/matcha.jpg" class="img-responsive" alt=""&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 box-two no-padding"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center text-box-small"&gt;
                          &lt;img class="icon" alt="" src="img/icons/4.png"&gt;
                          &lt;h3&gt;TEA GLASS&lt;/h3&gt;
                          &lt;p&gt;Did you know that hot tea tastes better in a glass cup?&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 photo-box-small"&gt;
                          &lt;img src="img/squares/blacktea.jpg" class="img-responsive" alt=""&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="row"&gt;
                      &lt;div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 photo-box-small"&gt;
                          &lt;img src="img/squares/loosetea.jpg" class="img-responsive" alt=""&gt;
                      &lt;/div&gt;
                      &lt;div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center text-box-small border-2"&gt;
                          &lt;img class="icon" alt="" src="img/icons/5.png"&gt;
                          &lt;h3&gt;TEA KETTLE&lt;/h3&gt;
                          &lt;p&gt;A type of pot, typically metal, specialized for boiling water, with a lid, spout and handle.&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 box-one no-padding"&gt;
                  &lt;div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 photo-box"&gt;
                      &lt;img src="img/squares/teavariety.jpg" class="img-responsive" alt=""&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center text-box"&gt;
                      &lt;img class="icon" alt="" src="img/icons/6.png"&gt;
                      &lt;h3&gt;TEA MUG&lt;/h3&gt;
                      &lt;p&gt;A type of cup typically used for drinking hot beverages. Mugs usually have handles and hold a larger amount of fluid than other types of cup.&lt;/p&gt;
                      &lt;p&gt;A mug is a less formal style of drink container and is not usually used in formal place settings, where a teacup or coffee cup is preferred.&lt;/p&gt;
                      &lt;p class="hide-text"&gt;A travel mug is insulated and has a cover with a small sipping opening to prevent spills.&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>Here is my CSS:</p>
  
  <pre><code>/* -------- SQUARES SECTION -------- */
  #squares{
      height: auto;
      width: 100vw;
      background: #fff;
  }
  .squares{
      margin-top: 50px;
      margin-bottom: 100px;
  }
  .box-one{
      height: 584px;
      width: 584px;
      padding: 0;
  }
  .photo-box{
      height: 584px;
      width: 50%;
      padding:0;
  }
  .text-box{
      height: 584px;
      width: 50%;
      background: #f8f8f8;
  }
  .box-two{
      height: 584px;
      width: 584px;
      margin: 0;
  }
  .photo-box-small{
      height: 292px;
      width: 292px;
      padding:0;
      float: left;
  }
  .text-box-small{
      height: 292px;
      width: 292px;
      background: #f8f8f8;
  }
  .text-box-small-1{
      height: 292px;
      width: 292px;
      background: #f8f8f8; /* Or #f5f5f5 */
      border-left: 1px dashed #ccc;
  }
  @media (max-width: 768px){
      .text-box-small-1{
          border-left: none;
          border-bottom: 1px dashed #ccc;
      }
      h3{
          font-size: 18px;
      }
  }
  .icon{
      height: 64px;
      width: 64px;
      margin-top: 32px;
  }
  
  @media (width: 768px){
      #squares .container{
      padding-left: 97px;
      }
      .border-1{
          border-top: 1px dashed #ccc;
      }
      .border-2{
          border-bottom: 1px dashed #ccc;
      }
      .icon{
      height: 32px;
      width: 32px;
      margin-top: 24px;
      }
  }
  
  @media (width: 480px){
       .squares{
      margin-top: 0px;
      margin-bottom: 0px;
      }
      .border-0{
          border-top: 1px dashed #ccc;
      }
       .border-1{
          border-top: 1px dashed #ccc;
      }
      .border-2{
          border-bottom: 1px dashed #ccc;
      }
      .box-one{
      height: 480px;
      width: 480px;
      padding: 0;
      }
      .photo-box{
          height: 480px;
          width: 50%;
          padding:0;
      }
      .text-box{
          height: 480px;
          width: 50%;
          background: #fff;
      }
      .hide-text{
          display: none;
      }
      .box-two{
          height: 480px;
          width: 480px;
          margin: 0;
      }
      .photo-box-small{
          height: 240px;
          width: 240px;
          padding:0;
          float: left;
      }
      .text-box-small{
          height: 240px;
          width: 240px;
          background: #fff;
      }
      .text-box-small-1{
      height: 240px;
      width: 240px;
      background: #fff; /* Or #f5f5f5 */
      border-left: none;
      }
      .icon{
      height: 32px;
      width: 32px;
      margin-top: 24px;
      }
  }
  
  @media (max-width: 360px){
      .squares{
      margin-top: 50px;
      margin-bottom: 0px;
      }
      .border-0{
          border-top: 1px dashed #ccc;
      }
       .border-1{
          border-top: 1px dashed #ccc;
      }
      .border-2{
          border-bottom: 1px dashed #ccc;
      }
      .box-one{
      height: 360px;
      width: 360px;
      padding: 0;
      }
      .photo-box{
          height: 360px;
          width: 50%;
          padding:0;
      }
      .text-box{
          height: 360px;
          width: 50%;
          background: #fff;
      }
      .hide-text{
          display: none;
      }
      .box-two{
          height: 360px;
          width: 360px;
          margin: 0;
      }
      .photo-box-small{
          height: 180px;
          width: 180px;
          padding:0;
          float: left;
      }
      .text-box-small{
          height: 180px;
          width: 180px;
          background: #fff;
      }
      .text-box-small-1{
      height: 180px;
      width: 180px;
      background: #fff; /* Or #f5f5f5 */
      border-left: none;
      }
      p {
          font-size: 12px;
      }
      .icon{
      height: 32px;
      width: 32px;
      margin-top: 16px;
      }
  }
  </code></pre>