
Design comparison
Solution retrospective
This was my first responsive web page so I'm proud of getting it to look pretty close to the design. Next time, I want to more thoughtfully plan out the html to make sure my CSS code is efficient. For example, I think there were some places where using a class would have been more efficient than creating CSS for each element by their ID. Also some of my solutions were kind of hacky and I relied on using px as a unit so I'd like to learn how to use the other units of measurement in CSS to make the page more responsive.
What challenges did you encounter, and how did you overcome them?I could not figure out how to get the picture and the information to be centered with no space in between with either CSS grid or flexbox whilst having them have the same width and height. I figured it out by setting each part to a specific number of pixels but I'm sure there's a more flexible way to do it.
Another challenge was when I made the screen mobile sized, the elements were not remaining centered. I used some media queries to fix that.
What specific areas of your project would you like help with?I am super beginner at this stuff. I would love suggestions on how to make this simpler and more efficient. I'm interested in the best way to get the picture and info box centered and remaining the same size in a responsive way, maybe not using pixels as units.
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