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

1chgr 70

@1chgr

Desktop design screenshot for the News homepage coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

Maxime 430

@maxime927

Posted

Hi ! Hope you're fine ! Congratulations to have finished this challenge :)

I have some tips to share to you to improve your layout:

  • Concerning you main structure, it should be better to put the max-width on the <div class="container"> to fix the content in the center and set width in percentage of each box in it.

For exemple

.pic-container { width: calc((100% - 60px)/ 3 * 2 + 30px); }
.new-container { width: calc((100% - 60px)/ 3); }

.little-cont { width: calc((100% - 60px)/ 3); }
  • In you .last-container, you should align all the content at the top to align every texts ( number - title - description ), because in case of long description in one card, the number and the title will still be aligned.

Pay attention to spacings, including vertical spacings, it is really important to keep the website look organized and respect the work of the designer. :)

Hope it helps...

Maxime

Marked as helpful

1

1chgr 70

@1chgr

Posted

@maxime927 thanks man I really appreciate your helpful comment.

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