Submitted about 1 year ago

News Home Page (need improvements & help)

Ashok Kumar Dharanikota• 210

@Ashok-Kumar-dharanikota

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

News homepage

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

Well, I managed to do 50% of the website to match the design. But when I am dealing with class="blog-post-item" I find my design does not match the result. I realized I needed to go deeper about the grid. Any helpful resources or suggestions would be really helpful. I went through a few YouTube videos but still felt that dot in my mind.

Community feedback

OpokuWare• 230

@opoku334

Posted about 1 year ago

If you are using display: flex for the 'main-A-recent-blog-posts' and 'blog-post-items' containers, you can set your flex-direction to column on mobile screens to make your project look like the design Link below gives better understanding

https://www.w3schools.com/cssref/css3_pr_flex-direction.php

Marked as helpful

Nayan Bhatt• 980

@freaky4wrld

Posted about 1 year ago

Hey there, here you go with the resources you want, hope it helps in solving your issues..

grid and flex-box are different in approach.....
- in flex you can handle elements on a single axis (i.e. either rows or cols/ horizontal-axis or vertical-axis)
- in grid you can handle elements on a 2-D basis (i.e. both rows and cols/ horizontal and vertical-axis)

**Resources: ** grid-cheat-sheet, grid-crash-course

Hope it adds and fills the void...... glad to help

Marked as helpful

Please log in to post a comment

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