Submitted 10 months ago

Newbie Responsive Page Complete using CSS Grid

John Davidson• 210

@John-Davidson-8

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

This is a solution for...

Social proof section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

This is my third challenge completed using CSS Grid. Two of the sections had cards that needed to be positioned in a laddered/staggered manner. One with staggered columns and the other with staggered rows. Implicit Grid kicked in at one point when I commented out my solution, and it worked fine! You know when you solve a problem and you do not know how you did it? That is the way it was for me creating multiple rows. Not sure if it done in a best practice fashion but it works. If anyone can have a look at the two sections using Grid that would be great. Also, all the work over the last dozen projects to create effective README's is paying off, does not take long now, and I find writing them beneficial as it solidifies some of what I have learned in the project.

Community feedback

Daniel 🛸• 44,250

@danielmrz-dev

Posted 10 months ago

Hello John!

Your project looks nice!

Those laddered/staggered cards are quite a challenge right?

I have one suggestion for you to improve your project:

You can place your main in the middle of the page by doing this:

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

In order to work, you have to remove min-height: 100vh; from your container because this makes that scrollbar appear. But it's not necessary because this project is supposed to fit inside a desktop screen.

I hope it helps!

Other than that, my friend, you did a great job!

Marked as helpful

John Davidson• 210

@John-Davidson-8

Posted 10 months ago

Hey @danielmrz-dev thanks for that, much appreciated. Will get to work on it tomorrow.

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