Melvin Aguilar ๐ง๐ปโ๐ปโข 61,220
@MelvinAguilar
Posted
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 helpful
2