Design comparison
Solution retrospective
Hi, that's my solution on the challenge. I submitted a non-finished version in order to receive feedback on the grid layout. Thanks for helping!
Community feedback
- @Suleman-TasawarPosted over 1 year ago
Hi there Alessio i viewed the issue of your website.By loading it in mobile device i noticed that everything is stretching in mobile version.
If you think 🤔 about the layout of this project and break it into smaller components.
For the Navigation we can use flex box for it For the Main hero section we can use grid like you did.
As in your code your have only used
grid-template-column
has have given 3 columns.But you did specify how many row you need and i think that is causing the content stretching in your website. You can usegrid-template-row:repeat(2,1fr);
This will give you 2 rows to put you elements in (The repeat is just a shorthand forgrid-template-row:1 fr 1 fr;
by repeating it two time)and as for the footer you can also use flexbox as the elements need to be placed horizontally
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