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 Website Template

@Earpz1

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 is my first dive into using Flexbox to create a layout. I'm really looking for feedback on my use of containers and if I am going in the right direction - should I be using containers within containers within containers etc..?

I've been learning how to look at a layout and identifying where the rows / columns are so feedback if I have approached that would be great also. Really enjoyed this challenge and I will be giving the mobile response a go shortly!

Also, why does the screenshot show the main hero image as very squashed?

Community feedback

@dusan-b

Posted

Hi Daniel,

to show the image correctly, you need to remove the CSS declaration height: 100%; or set it to auto.

You are doing good with grouping components which belong together in div containers. But you shouldn't use fixed heights, because it won't work when content grows. Let the content itself define the height.

Marked as helpful

0

@Earpz1

Posted

@dusan-b Thank you very much for your comments. I corrected the image by removing the height from img and it's worked great. It makes a lot of sense to let the content define the height, appreciate that!

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