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 landing page using CSS Grid and Flexbox

Josh 320

@Ao-chi

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


This project was a great start for me upon joining the community! I have a great time building!

Question in mind:

  1. How do you structure your scss files?

Community feedback

Adriano 34,090

@AdrianoEscarabote

Posted

Hi Josh, how are you? Welcome to the front-end mentor community! I really liked the result of your project, but I have some tips that I think you will enjoy:

If we see how the layout is behaving at higher resolutions, with the help of google dev tools, we will see that it is stretching a lot, to solve this we can use a max-width with the value we want the content to stop growing and to center use a margin: 0 auto;

body {
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
}
header {
    position: absolute;
}

I made this change to the header tag to improve its behavior at higher resolutions!

The rest is great!

I hope it helps... 👍

Marked as helpful

1

Josh 320

@Ao-chi

Posted

Hi Adriano, thanks for the warm welcome and also for an awesome tips! I tried it on the dev tools and it really is stretching a lot. Will add your suggestion on my code thanks again!

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