Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

News homepage

@AlessioValastro

Desktop design screenshot for the News homepage coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

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-Tasawar

Posted

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 use grid-template-row:repeat(2,1fr); This will give you 2 rows to put you elements in (The repeat is just a shorthand for grid-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 GitHub
Discord logo

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