Skip to content
Submitted over 2 years ago

Responsive news homepage using CSS Grid and Flexbox

sass/scss
Alfie Mitchell•240
@alfiemitchell123
A solution to the News homepage challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

  • I struggled with header/paragraph line breaks. I wanted to avoid using <br> tags as they don't respond well when resizing the browser. What other techniques do you use to wrap them correctly in their container?
  • With the top article section at the bottom of the page, I was unsure how to space them out evenly so that the right side of the third article is in line with the edge of the main grid container. What are the best practices for spacing out items evenly in a CSS grid?
  • The hamburger menu icon on the mobile site is not perfectly lined up horizontally with the logo. I had to add a margin-top of 7px to the icon for a 'hack' fix. What is the best practice for this?
Code
Loading...

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on Alfie Mitchell's solution.

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