
Responsive preview card using HTML5, CSS3 and CSS Flexbox.
Design comparison
Solution retrospective
I am most proud of my ability to use Flexbox to create the layout easily and making the website responsive on mobile screens down to 320px.
Next time, I'll make sure to check the styles required for responsiveness to determine basic sizing of main element and if my project will be better with a background image or the img tag.
What challenges did you encounter, and how did you overcome them?I first used an img tag, when I discovered the style on mobile will use a different photo. So I had to get rid of my img tag and put a section without content instead which I later placed the appropriate images with CSS, and over riding it on mobile by replacing background image with the one specified for mobile.
What specific areas of your project would you like help with?All of the challenges I faced I was able to solve, so I don't know if there is a problem with my code and will surely appreciate a feedback if any is found.
Community feedback
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