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-card using grid css

@Sikootiponepone

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


i had a challenge with adjusting the of card in media query, the method I used isn't efficient since i only adjusted the height of the div containing the card, isn't there another way to adjust the height.

Community feedback

Ahmed Faisal• 5,095

@afrussel

Posted

Overall good work as a newbie. There are some issues on box width area. Try to make those like design. Otherwise all good

Marked as helpful

1
hardy• 3,660

@hardy333

Posted

Hey, nice solution. Congratulations on completing it.

Few suggestions:

  • Use cursor: pointer; on button elements and also try to add some :hover effects on them.
  • Do not use width: 100vw; on .container class use width: 100%; instead, this will fix horizontal scrollbar problem which appear on smaller screen sizes when there also is vertical scrollbar, and in general most of the times use percentages instead of vw unit for width values, if there is not some very special case.
  • The way you apply height working just fine, I think. But it is not ideal of course. You will find better ways as you will have more practise.
  • Use some vertical padding on body this will separate your top and bottom cards from edge of the screen on mobile view.

Good luck and have a nice day, hope this tips and suggestions will help you.

Marked as helpful

0

@Sikootiponepone

Posted

Thank you very much

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