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

Responsive News-homepage solution using grid

Emmanuel 40

@Emmachijioke

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


Please suggest a better way to help me improve layout and image setting

Community feedback

Maxime 430

@maxime927

Posted

Hi Emmanuel, hope you are fine :) you solution looks well, i can give you some tips to improve your solution :

  • Concerning the images, i should have done the opposite about resizing settings, by putting the main image with a fixed height to keep the same vertical spacings with the title and text under and a fixed width but automatic height to the image in the 3 columns cards in the bottom. In this way, the images in the second section should not be deformed.

  • Concerning your layout : you have a lot of breakpoints, you can easily optimize your solution using only one breakpoint at 1024px to separate mobile and desktop (including tablet in desktop)

PS : you forgot the hover effects and it is not the right mobile menu :)

Keep going this way

Hope it helps...

Maxime

1

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