@ringm
Posted
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 :)
@ringm thanks a lot. A big fat thanks to you for your feedback. I'll get back to work and I'll use the method you described. I'm very grateful bro.
@ringm
Posted
@Habeebullahi01 am glad I could help!