Design comparison
Solution retrospective
I am most proud of actually getting the four card system to work properly. This was the first time that I had used CSS grid successfully.
What challenges did you encounter, and how did you overcome them?I struggled with the position of the image. I struggled with getting the image to align with the bottom. Normally, in the mobile layout, since it was vertical, the height was determined completely by the content/where the image was, so the image was at the bottom. However, when I used a media query and changed the grid layout, the heights of all the cards were equal, rather than auto. So, to make everything at the bottom, I used margin-top: auto.
What specific areas of your project would you like help with?There isn't anything I would like help in.
Community feedback
- @ralphvirtucioPosted 6 months ago
Hi Jaiden Lee, Great job on completing this challenge!
Here are my feedbacks to your challenge:
-
It's not a good practice to have two
<h1></h1>
tag element in your HTML, I'd suggest making the other heading a<h2></h2>
-
If your struggling on positioning the image, I'd suggest wrap the image in the div element, set a align-self property with a value of flex-end to the div selector.
-
Try using rem or em for your max-width and media-query. This will improve responsiveness of the page because rem and em are relative units they scale with the user's font size settings.
-
I'd suggest to remove the property text-align in your .site-container and move it to each content that you want to have the text centered. Setting a text-align: center in the parent div will cause everything to be centered. That's the reason that the text in your card are also centered.
** HAPPY CODING 🧑💻🧑💻 CODE UP ☕☕☕**
0 -
- @johntmeachamPosted 6 months ago
I like the way you used grid, I used flexbox but knew grid would be better but I'm not good with grid yet. Nice job. Sorry not much constructive criticism as I am new to css.
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