Four card feature solution (float layout)

Community feedback

• 

  Martin•1,150

  @ringm

  Posted about 5 years ago

  Hey Habeebullahi, great work! I think the overall layout of the site looks good. And it's also responsive, congratulations.

  I checked your code and I think you could achieve a better result using flexbox instead of floats. You could try something like this:

  .cards {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
   @media (min-width: 600px) {
    .cards {
      flex-direction: row;
    }
   }
  

  That should do the trick! In small devices your cards will display one below de other, and when the screen hits 600px size (you can change that if you like) they will display like the big screen layout.

  Also, I leave you here a short article that explains all the different ways you can vertically center an element.

  I hope it helps! Good luck and happy coding :)

  02
• 

  Israel B Lewis•10

  @blewis-1

  Posted about 5 years ago

  I used the transform:translateY and translated(moved) it by 50% upwards. I added a class on both containers that needed to be vertically aligned. Note: I used flex-box.

  01