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 Home Page Using CSS Grid and Flex Box

Rasel 40

@rasel9t6

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 2nd attempt. I try to fix all previous problem as much as possible. this is only for desktop view. mobile view is quite difficult for me. because i am not an expert. I learning day by day.

Community feedback

@Chrisesbueno

Posted

As advice, I would tell you that in the body you do not add an exact width, normally it is not necessary in most cases since as default it always uses the 100vw available from the browser, and the size that you really want to be able to modify is that of your container, yes you still want to add a width to your body use the following style min-width: 100vw. To center the elements in your body with grid you only need to use two lines, display: grid; place-items: center;

For the mobile view part, you only need to add a single column template to your grid because it is the only thing you need, and accommodate the different parts of your code in the part where it would go, it is a bit more complicated to understand but not difficult, I leave you this game that explains how grid works in a didactic and interactive way: https://cssgridgarden.com/ :D

Marked as helpful

0

Rasel 40

@rasel9t6

Posted

@Chrisesbueno Thanks For Your valuable advice. Its helps me lot.

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