Design comparison
Solution retrospective
This was a great project to get comfortable with grid, both using the grid-column settings and grid-template-areas. However, the two aspects which I learned the most about were background images and box shadows.
What challenges did you encounter, and how did you overcome them?Finding a suitable breakpoint to snap from the mobile column layout to the grid was tricky. In the end I set a rather small max-width on the cards so that the layout stays in one column until very large screens. It would probably have been better to design and implement an intermediate grid layout which is less wide, suitable for screens of about 800-1200px.
What specific areas of your project would you like help with?I am keen to understand sizing differences between browsers. When I view my page on Chrome, it fits comfortably on the screen with plenty of whitespace around it. But in Safari, there is a vertical scrollbar. If anyone knows why this occurs and how to manage it, I would be open to learning!
Community feedback
- @DivadovitchPosted 6 months ago
Hi Neil,
For the differences between browsers, I'm not sure but maybe this has to do with user-agent stylesheet. Each browser has is own stylesheet. Using a reset css like this one I'm using on this project can help.
About the transition from the mobile version to the desktop on, this code helped me a lot
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));, you can read more about it on this article.Last thing about the
<span>you used on the name and title of the cards, as I understand it's better to use<p>because it has a semantic meaning and<span>dont. Link to more infos.Hop this help
Hope this help
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