Design comparison
Solution retrospective
Welcome all feedback, my first challenge so I'm sure there are things I could do differently.
Specific question would be for the eye icon, I used an absolute pixel position for that and it feels like there must be a better way.
Community feedback
- @eleswastakenPosted almost 3 years ago
Hey!
That's right there is a better way to center something. It is flexbox. Use this to a container of whatever you want to center:
display: flex; justify-content: center; // center elements horizontally align-items: center; // center vertically
Side notes:
When you see something that changes states on the design, it almost always means it is supposed to be interactive. It could be a button, or a link, or any kind of interactive element. So in your case, you would expect the preview image or card title to take you somewhere, to the Learn more about... for instance. The same is true for the profile elements, the name and avatar; again you would want to learn more about the author when you clicked on it. So make the image container, title, author's name and profile pic links.
You didn't have to position the
.card
and transform it. If you wanted to set some spacing, usepadding: XXpx;
on the parent element, ormargin: XXpx;
on the element itself(i highly suggest you google it all).Also when doing challenges like these, remember that they are part of a bigger webpage, meaning the layout should be done accordingly.
Best of luck!
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