Design comparison
SolutionDesign
Solution retrospective
Hello this is my 2nd day & challenge in frontend mentors
any feedback on how to make this code better?๐
Community feedback
- @MelvinAguilarPosted about 2 years ago
Hi @Ammar0Yasser ๐, good job on completing this challenge! ๐
Here are some suggestions you might consider:
- Setting element width with percentages or VW will cause your component to behave weirdly on mobile devices and high-resolution desktops.
You can set the width to 320px or 20rem. It will help you avoid occupying too many media queries
.card { . . . /* width: 20%; */ max-width: 320px; margin: 0.938rem } .img-container { /* This can be removed */ /* border-radius: 8px; */ /* width: 100%; */ /* max-height: 13rem; */ /* height: 16rem; */ /* overflow: hidden; */ /* display: flex; */ /* justify-content: center; */ /* align-items: center; */ } .img-container img { width: 100%; object-fit: fill; border-radius: 8px; } @media (max-width: 375px){ .card { /* width: 75%; */ } }
- Use
margin: 0.938rem
ormargin: 15px
in the.card
selector so that it has some space when viewed on mobile devices. - Use
min-height: 100vh
tocontainer
selector, with this property you set a height and you let the element grow even more if necessary. Also, remove themargin: 9vh 1em;
to center correctly. - Add an h1 tag to your solution. The
<h1>
element is the main heading on a web page. There should only be one<h1>
tag per page, and always avoid skipping heading levels; Always start from<h1>
, followed by<h2>
, and so on up to <h6> (<h1>,<h2>,...,<h6>). The HTML Section Heading elements (Reference)
Solution:
<h1>Improve your front-end skills by building projects</h1>
I hope those tips will help you.
Good job, and happy coding!
Marked as helpful2
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