Design comparison
Solution retrospective
Hi all,
This is my very first attempt at creating something on my own. I only have very basic knowledge of HTML and CSS as I started learning 3 weeks ago. I have tried to replicate the card style to the best of my ability which I am proud of, based on default browser size and mobile size, but there are some obvious responsive problems through manual browser adjusting.
- Resizing browser down, only my right image flexbox item shrinks, not the both of them at the same time.
- Resizing browser down, content (text) on the right box disappears at the bottom after the layout shrinks.
My questions would be how do I fix the above problems. I have a feeling that I had used some properties of flexbox or width units incorrectly. Hope you guys can provide me with some useful feedback and changes, thanks! :)
Edit: I have noticed that my solution preview showed the card in different dimensions as I have interpreted the 2nd design template (the one with the outside white border) as the website layout. Please refer to LIVE WEBSITE LINK for the proper card size.
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