Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive three layout box using flexbox

@adetona54

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Make sure to advice me on how to improve my code

Community feedback

@mk-muzzammil

Posted

Yeah a recomendation for you I have seen your code. try to use local variables made it in :root{} and use it on the whole stylesheet. Another recomendation is you set buttons using position absolute try it to do with flex using align-self:baseline .if you are using flex property then try to position it using relative units like vh,% it is more helpful to you in position elements more accurately even in responsive desings .Main Fault i have found in your project see your responsive mobile preview because you set height 100vh cards are not showing correctly it will go beshind the screen try not to set the height in these cases. hope you will like some recomendations any other query let me know.

Marked as helpful

1

@adetona54

Posted

@MK-Muzzammil The reason why I didn't use align-self:baseline; is because, when I do, It kind of increase the height of the box. I don't know if I have made a mistake somewhere, but still, I appreciate the time you've taken to review my code.

0
naroors 30

@naroors

Posted

The car images are kinda off. Also add more padding to the buttons. The "title" is too far away from the paragraph text. And the buttons should have some more margin-bottom.

But its still good.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord