Design comparison
Solution retrospective
This is actually, my 4th try. Yes, fourth!
I know it's a newbie challenge but I really struggled with it. I wanted to make sure I understood it and didn't just call it done after I'd randomly stumbled on the look I wanted.
I would appreciate any feedback for improvement, especially best practices.
Community feedback
- @ApplePieGiraffePosted over 3 years ago
Hey there, Raelinda! 👋
It looks like the fourth time's the charm! 😄 Overall, your solution looks pretty great and responds well! 👍
The only super minor thing I might suggest is giving the card component a height based on its content in the desktop layout (just so that it's size remains more consistent across desktop screen sizes and there's never too much or too little room inside the card component itself). 😉
And you could perhaps use the
<article>tag for the card component (since it is a self-contained element that makes sense without addition context from a parent element) to make your semantics slightly better.Keep coding (and happy coding, too)! 😁
1@RaelindaPosted over 3 years ago@ApplePieGiraffe
Thank you so much for your feedback. I will definitely refresh my knowledge of HTML tags and not just call everything a div.
The height settings of the desktop version is what gave me the most trouble. I still can’t figure out how to keep the card from having a greater height than the image. I though setting the card’s max-height to the image’s actual pixel height would do it. But I still would get top/bottom margins on the image at certain screen sizes.
Any suggestions on that would be greatly appreciated.
— Raelinda
1@ApplePieGiraffePosted over 3 years ago@Raelinda
No problem! 😀
You could try to create a container for the image but leave it empty and simply add the image to the container using CSS background images. That way, you'll be able to have the content of the box of text to the left of the card define the height of the card itself in the desktop layout (and the CSS background image will be clipped if it's too large) and you can simply set a fixed (or variable) height for the container that has the image in the mobile layout so that it can be seen. 😉 Let me know if that helps or if you have any further questions.
Oh, and hey, if you found these comments helpful, an upvote would be appreciated! ;)
1 - @RaelindaPosted over 3 years ago
Thank you again! Consider yourself gratefully upvoted. :) — Raelinda
0
Please log in to post a comment
Log in with GitHub
Join 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