FLEX 4 SECTIONS

by Glynne Turner

HTML

<div class="footer-container">
  <div class="footer-section">
       
      <div class="footer-content">
           1
      
      </div>
  </div>
  <div class="footer-section">
      <div class="footer-content">2</div>
  </div>
  
  <div class="footer-section">
      <div class="footer-content">3</div>  
  </div> 
  
  <div class="footer-section">
      <div class="footer-content">3</div>  
  </div> 
</div>

CSS

*{padding:0; margin:0}


.footer-container {
  position:absolute;
  bottom:0;
  width:100vw;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  padding: 0;
  margin: 0;
  list-style: none;
  background-color:blue;
  padding-bottom:100px;
}

.footer-section {
  background: tomato;
  width: 24%;  
  line-height: normal;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center; 
}
.footer-content{
  background-color:green; 
  height:100%;
  padding:50px 10px;
}
@media only screen and (max-width:768px){
  .footer-section{display:block;width:100%} 
}