Content Within Container In Footer Overlaps When Reduced To Mobile Screen

I've created a container within my Footer with three columns. When re-sized to below 600px, the Divs display on top of each other. I'd like for the content to be displayed one afte

Solution 1:

@media (max-width: 600px) {
  footer {
  width: 100%;
  clear: both;
  text-align: center;
  font-family: raleway;
  font-size: 90%;
  font-style: normal;
  color: black;
  font-variant: normal;
  padding: 100px 0px;
  background-color: lightgrey;}

  .footwrap {
    width: 100%;
    display: block;
  }

  .footleft {
   text-align: center;
   width: 100%;
   position: relative;
   top:22px;
  }

  .footcenter {
   text-align: center;
   width: 100%;
   padding: 20;
   position: relative;
   top:22px;
  }

  .footright {
   text-align: center;
   width: 100%;
   padding: 20;
   position: relative;
   top:22px;
  }
}

Solution 2:

Update your CSS like this

.footwrap {
    overflow: hidden;
    width: 100%;
}
.footleft, .footcenter, .footright {
    float: left;
    text-align: left;
    width: 33.33%;
}

@media (max-width: 600px) {
  footer {
    width: 100%;
    clear: both;
    text-align: center;
    font-family: raleway;
    font-size: 90%;
    font-style: normal;
    color: black;
    font-variant: normal;
    padding: 40px 0px;
    background-color: lightgrey;
  }
  .footleft, .footcenter, .footright {
      float: none;
      text-align: center;
      width: 100%;
  }
}