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 3 column previewcard

nati 200

@nati-pi

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

Community feedback

vcodey 270

@v-codey

Posted

hey @nati-pi ,

the problem with your solution is not hidden, you can also see there are issues. However I suggest some things that will probably fix it.

  • provide height: 28rem; & width: 13rem; in the .padd so that the button doesn't flow out
  • instead of setting button margin top set the p with a min-height of 11 to 14rem. ( the issue with btn margin-top here is that the button position is dependent on the text length if the text is more then the button will not be aligned with each other).
  • in media queries set body height to 100%
  • remove container height & width and set border-radius with overflow hidden on container. In that way you wont have to set individually for every card

keep learning happy coding

Marked as helpful

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