Submitted almost 2 years ago

News page using CSS grid

Joanna Skrzypczak• 530

@joaskr

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

Hi community :)

Oh my, that challenge was a lot harder than I expected. I had a lot of trouble making it responsive. I decided to use grid for styling and that was actually the first time that I used grid in a frontend mentor challenge. I tend to stick to Flexbox whenever I can but I wanted to challenge myself. Big kudos to Design Course for this tutorial. It help me understand how to use grid-template-areas.

I'm not fully satisfied with the solution and I will definitely improve but I need to do a couple more sites with grid to get some practice. But you know, practice makes perfekt.

Community feedback

Khondoker Aashabul Imam• 260

@aashabul

Posted almost 2 years ago

your site looks good. But I have found two areas that you can improve.

letting the mobile menu opened If I change the viewport from mobile to desktop, the mobile menu still remains opened. You can make it more responsive by solving that issue.
the buttons and other link tags are clickable when the mobile menu is opened. You can increase the z-index of the overlay div to secure all the content in bottom of it so they can't be clicked when the mobile menu is opened. That might be a good practice.

I am also learning. Thanks.

Account Deleted

Hi, you can try :

object-fit: contain;

this will help with the responsiveness, and the images will not be cropped; give it a try.

Congrats for finish the challenge.

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