Design comparison
Solution retrospective
First, I'm proud of completing the challenge. After completing the challenge, I gained beautiful knowledge of CSS variables and pseudo-class selectors.
What challenges did you encounter, and how did you overcome them?Getting the layout to match the provided design took some time, but practice makes perfect.
What specific areas of your project would you like help with?If I want to use CSS Grid instead of Flexbox, how can I achieve this?
Community feedback
- @Shahbaaz92Posted 7 months ago
Hello, The site was good but do not use % or rem for paddings and margins instead use ems or px for paddings/margins and reduce the vertical gap between the body and the container. Let the width of the first article(first child of the main container) and section (second child of the main container) be 100% of the main container, that way it will be responsive. In the section element after the display: flex use justify-content: space- evenly, so that they are spaced evenly.
To use grid .flex-container{ display:grid; grid-template-rows: 1fr; grid-template-columns: repeat(2, auto) } .flex-container article{ grid-row: 1/-1; } .flex-container section{ grid-row: 1/-1; #here you can use flexbox instead of grid for the children }
Marked as helpful0@OmowunmikamilPosted 7 months ago@Shahbaaz92 This was helpful, I will apply the corrections. Thank you!
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