Design comparison
Solution retrospective
First time using grid any tips on it would be great
Community feedback
- @vanzasetiaPosted over 2 years ago
Hello, @Kathund! 👋
Congratulations on finishing this challenge! 👏
Some suggestions from me.
- I notice that you made four columns for the grid layout. Why don't just make it two columns? I think it will work well because the second card and the third card have the same width.
- I also notice that the card is not responsive. I would recommend trying to make it responsive. 😉
- Avoid using
br
elements for presentational purposes. Read what MDN documentation says about it. So, I would recommend making thep
inside thethree
section as a list element instead.
I hope this helps! Happy coding! 😁
0 - @VANIMEHTAPosted over 2 years ago
This looks fine, just try to reduce the height of your main container. Also instead of px you can give height and width in vh and vw.
0@VANIMEHTAPosted over 2 years ago@Kathund see basically vh means view height and vw is view port. They are basically height and width in % values of the device user is using. for eg: if I define height: 80vh; then this means that your container will take 80%of the device height user is using. Therefore the height will adjust itself based upon user's screen automatically. I hope its clear!
0@KathundPosted over 2 years ago@VANIMEHTA thanks I might use it in some of my upcoming project
0@vanzasetiaPosted over 2 years ago@VANIMEHTA I would not recommend setting any
height
on the card element. Let the elements inside the card control its height. Most of the time you want to let the elements inside it control it because if the content length is changed then you have to keep changing theheight
of it.@Kathund Also, I suggest removing the
width
as well. Instead, set amax-width
. This way, the card is allowed to shrink if needed. 😉0
Please log in to post a comment
Log in with GitHubJoin 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