Design comparison
Solution retrospective
I'm most proud of creating a responsive grid layout that effectively manages different screen sizes and item placements. Next time, I would focus on optimizing the design for more complex interactions and enhancing accessibility features. Additionally, I’d explore more advanced CSS techniques to further streamline and simplify the layout.
What challenges did you encounter, and how did you overcome them?I faced challenges with ensuring that items positioned absolutely did not overlap text and maintaining responsive design across various screen sizes. I overcame these issues by carefully adjusting CSS properties and using media queries to adapt the layout for different devices. Testing and iterative refinement helped ensure a clean and functional design.
What specific areas of your project would you like help with?I would like feedback on optimizing the grid layout for better responsiveness, especially how to ensure items properly align across different screen sizes. Additionally, guidance on improving the accessibility features and enhancing visual hierarchy would be valuable. Any suggestions for refining CSS techniques or layout efficiency are also appreciated.
Community feedback
- @wendyhamelPosted 2 months ago
Hi, your solution to this challenge looks good!
You said you would like feedback on optimizing the grid and I am happy to provide you with some tips.
- For starters, you are on the right track using grid for this. You could improve the responsiveness by omitting the use of a set height and width on the cards. This way, you can let the grid and the
1frunit do the work of distributing the content. - Also, you could use
gap: 10pxon the container of the cards (class="app"in your case) instead of the margins. This way you only have to declare it once, can be used with flex and grid and will help the browser to calculate the afailable space left to place the cards. - The use of
pxunits restricts the responsiveness of your site. You could try to use more relative units likerem,em, viewport sizes and percentages. MDN docs: Values and units - I noticed you can improve semantics on you solution by wrapping the content in a <main> element and the attribution could be the
<footer>.
Happy Coding!
0 - For starters, you are on the right track using grid for this. You could improve the responsiveness by omitting the use of a set height and width on the cards. This way, you can let the grid and the
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