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

3 Column preview card component

@alexinzunza

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


Hi! your feedback is important to me, its really help me to improve. Thanks!

Community feedback

@benjoquilario

Posted

Hey @Alexinzunzav Great job on finishing this one, It looks good

Some suggestion:

  • Remove the height: 100vh or just add the min-height: 100vh on the body tag. Because this will only limit the body to have a height 100% of the remaining viewport or screen.
  • Also avoid using width: 100vw in a big container like body or main. Because it will only add a horizontal scroll bar.
  • Also must add the cursor: pointer on button, to inform the user that this is clickable and not just for design.
  • Invalid property on * selector border: border-box; box-sizing instead

Aside from those everything is good, keep coding and happy coding too!

Marked as helpful

1

@alexinzunza

Posted

@benjoquilario Hi Benjo, thanks for your comments! do you suggest that i have to use width: 100%; and height: 100%; instead?

0

@benjoquilario

Posted

@Alexinzunzav width:100% and min-height: 100vh instead, so that the element will expand if it needs to

Marked as helpful

0

Account Deleted

Good work, I only see that in tablet mode it cuts out. all three columns must start in width: 950 px

Marked as helpful

1

@alexinzunza

Posted

@vane-mp thanks for you comment Vanessa! i didn't made a media quiery for tablet size :/ In cases like this do you recomend work with media queries or make a fluid design with responsible grid using for example `grid-template-columns: repeat(auto-fit, minmax(200px, 1fr) or something like that?

i'll keep tuned to your comments!

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