Design comparison
Solution retrospective
With this exercise, I learned something I had never done before: changing the color of the list item markers.
li { list-style-type: inherit var(--color-Dark-Raspberry); }
& ::marker {
color: var(--color-Dark-Raspberry);
}
}
What challenges did you encounter, and how did you overcome them?I also had to set the image to position: absolute in media, so that it wouldn't be affected by the div it was placed in.
@media screen and (min-device-width: 325px) and (max-device-width: 600px) {
.card {
border-radius: 0px;
margin: 150px auto 0px auto;
& img {
position: absolute;
top: 0;
left: 0;
}
}
What specific areas of your project would you like help with?
I’m not sure if the solution I gave for the image in the media query is the best one. How could I improve it?
Community feedback
- @juliusalbertoPosted 4 months ago
I saw your code and it's readable for me! Good job! Your HTML page uses semantic HTML, and I think it's accessible enough. It looks good on range of screen sizes (I tried it on phone and tablet).
There are some things that could be improved, tho. For the desktop page, I think that the gap between elements in a section is a bit off. The font weight are also off (but it's a minor thing tho).
I really like the way you use grid for your table. I hadn't thought of it previously, should have used it next time. I have similar solution w/ you with regard to the absolute position of the picture. In my case, I removed the padding for the card and add some extra padding for the text content.
Overall good job.
Marked as helpful0
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