Design comparison
Solution retrospective
Quite a few things were challenging.
Tried using border-bottom to put lines under each tag but it didn't work. What did work was putting lines under the tag, so that's what I did, and then removed the lines under the last row.
Had trouble figuring out why my page wouldn't center horizontally. Finally figured it out. My max-width was in the body, not the .container. After switching from the body to the .container, page was successfully able to center horizontally.
Then had to figure out how to change the layout for screen sizes, as the mobile and desktop versions were slightly different. Unlike the last few challenges, the desktop and mobile versions were the same.
I decided to add an extra div so that the image could take up the whole width of the screen. But when switching from small to large and vice versa, the image isn't smooth.
Also had to put @media at the very end, or else it wouldn't work.
Community feedback
- Account deleted
Well done on your project!. It's okay to not get everything perfect on the first try—what matters is that you're learning and improving with each attempt.
0
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