title: Div move vertically after window resize
body: <p>How do i make these divs to move down when window resizes and on mobile devices to be a width of 100%; <strong>Subject class = "project-cards"</strong></p>
  
  <p>Heres the Code...
  Resize window.
  Theres alot of things going on here, first when the window resizes i want the three divs to move down into a vertical row. When the window gets to about the size of a mobile phone i want the three divs to still be vertical with a width of 100%; so that it is covering the the whole page width wise. You can see alot of things going wrong with the content inside the divs when it resizes. For example the text and button overlap. I know i cant ask two questions but if you could help me get the three divs to be responsive, that will help me so much. Visit site <a href="http://xlaeo.tk" rel="nofollow noreferrer">Xlaeo.tk</a></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>.mainCenter{
      width:100%;
      
      padding-right:100px;
      padding-left:100px;
      padding-top: 50px;
      height:700px;
  }
  
  .project-wrapper{
      margin-top: 420px;
  }
  .headerProjects{
      font-size: 25px;
  font-weight: BOLD;
  margin-left: 52px;
  margin-bottom: 20px;
  color: #d80068;
  }
  
  
  .projectholders{
      height:auto;
      width:100%;
    margin:0 auto;
    display: flex;
    justify-content: center;
    margin-bottom: 100px;
   
  
    
    
      min-width: 200px;
  }
  .projects-cards{
    border:.9px solid #f7f7f7;
      border-radius: 2rem;
  display: block;
   width: 30%;
   margin-left:25px;
  }
  .projects-cards:hover{
         box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
           transition-delay: 1s;
              transition-duration: .5s;
  }
  .media-top{
      width:100%;
      height:300px;
  border-bottom: 1.9px solid gray;
  position: relative;
      
  } 
  
  .media-top img{
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
  }
  
  .project-info{
      width:100%;
  
  }
  .progress-left{
  float: left;
  width: 150px;
  height: 150px;
  
  }
  .project-money{
     float: right;
  width: 170px;
  border-bottom: 1px solid #c7c8c9;
  
  }
  .project-money h1{
   font-size: 16.9px;
  color: gray;
  font-weight: bold;
  width:900%;
  
  }
  .visitProject-button-H{
  padding: 20px;
  float:right;
  
  
  }
  
  .visi-project{
      height:50px;
     width:135px;
      background-color: #ff0043;
      font-size: 20px;
      font-weight: bold;
      border:none;
     border-top-left-radius: 1rem;
      border-bottom-left-radius: 1rem;
  }
  
  
  
  .under{
      display: flex;
      margin:0 auto;
      justify-content: center;
      font-size: 60px;
     color: #ff0043;
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div class="projectholders"&gt;
       &lt;div class="projects-cards"&gt;
               &lt;div class="media-top" &gt;
                  
                  &lt;img src="http://cdn.pcwallart.com/images/mercedes-benz-biome-seed-wallpaper-1.jpg" width="100%" height="100%" /&gt;
               
               &lt;/div&gt;
               &lt;div class="project-info"&gt;
                   &lt;div class="progress-left"&gt;
                       &lt;img src="https://camo.githubusercontent.com/40a03a2e27517edee74b177b7d48f1632b31c693/687474703a2f2f692e696d6775722e636f6d2f414a30364157452e706e67"
                       width="100%" height="100%;" /&gt;
                         
                   &lt;/div&gt;
                    &lt;div class="project-money"&gt;
                       &lt;h1&gt;Backed by $102,323 &lt;/h1&gt;
                   &lt;/div&gt;
                    &lt;div class="visitProject-button-H"&gt;
                      &lt;button class="visi-project" type="button"&gt;Visit&lt;/button&gt;
                   &lt;/div&gt;
               &lt;/div&gt;
          &lt;/div&gt;
     
       &lt;div class="projects-cards"&gt;
                 &lt;div class="media-top"&gt;
                  &lt;img src="https://cdn.dribbble.com/users/149817/screenshots/1436337/speedcam.gif" width="100%" height="100%" /&gt;
          
               &lt;/div&gt;
                 &lt;div class="project-info"&gt;
                   &lt;div class="progress-left"&gt;
                       &lt;img src="https://camo.githubusercontent.com/40a03a2e27517edee74b177b7d48f1632b31c693/687474703a2f2f692e696d6775722e636f6d2f414a30364157452e706e67"
                       width="100%" height="100%;" /&gt;
                    
                   &lt;/div&gt;
                    &lt;div class="project-money"&gt;
                       &lt;h1&gt;Backed by $9,564 &lt;/h1&gt;
                   &lt;/div&gt;
                    &lt;div class="visitProject-button-H"&gt;
                      &lt;button class="visi-project" type="button"&gt;Visit&lt;/button&gt;
                   &lt;/div&gt;
               &lt;/div&gt;
          &lt;/div&gt;
           &lt;div class="projects-cards"&gt;
                   &lt;div class="media-top"&gt;
                  &lt;img src="http://coolwallpaperz.info/user-content/uploads/wall/o/27/girl-motorcycle-streamlined-cool-sumer-370761.jpg" width="100%" height="100%" /&gt;
                  
               &lt;/div&gt;
                 &lt;div class="project-info"&gt;
                   &lt;div class="progress-left"&gt;
                       &lt;img src="https://camo.githubusercontent.com/40a03a2e27517edee74b177b7d48f1632b31c693/687474703a2f2f692e696d6775722e636f6d2f414a30364157452e706e67"
                       width="100%" height="100%;" /&gt;
                   &lt;/div&gt;
                   &lt;div class="project-money"&gt;
                       &lt;h1&gt;Backed by $23,324 &lt;/h1&gt;
                   &lt;/div&gt;
                    &lt;div class="visitProject-button-H"&gt;
                      &lt;button class="visi-project" type="button"&gt;Visit&lt;/button&gt;
                   &lt;/div&gt;
               &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>