Skip to content
Submitted almost 2 years ago

CSS Grid, Without JS and mobile nav functionality

Amer•360
@amerrika
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

Hello everyone! After watching Kevin Powell's tutorial on grid I wanted to do this project to practice it. I am fairly happy with how the layout turned out but I am not happy at all with my Bottom Articles (3 articles that should be the same). They have weird behavior, images do not have the same size and at smaller screens I don't have bottom-padding of the body. Happy to hear your suggestions

Community feedback

  • Sinisa Vukmirovic•1,690
    @SinisaVukmirovicPosted almost 2 years ago

    Hello!

    Difference in the amount of text in your 3 bottom articles is what is causing the images to all have different sizes. Remove some of the text to see the change.

    You need to refactor your code. You either have to have a set width for the image, for example 33% and text area at 67%. Or even better, to go with the CSS Grid instead of the Flex-Box.

    Hope this helps to turn you in the right direction towards fixing your code.

    Marked as helpful
    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