Skip to content
Submitted about 2 years ago

News Website Template

Daniel Earp•100
@Earpz1
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...News homepage
  • HTML
  • CSS
  • JS
2junior

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 Brankov•860
    @dusan-bPosted about 2 years ago

    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
    Daniel Earp•100
    @Earpz1Posted about 2 years ago

    @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

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