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

3 column Challange responsive design using grid

@MorbitDemon

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


  • This was my first time doing Mobile design first.

  • The most annoying part of this challange was an error i had with git/github that didnt let me upload the respository.

  • Any feedback is appreciated

Community feedback

@natashapl

Posted

Hi Deren! You did a great job for a first responsive solution. The only feedback I have is that there seems to be an excessive amount of margin around the section and attribution. I can tell you were trying to match the design, but it may be best to vertically center the section. Since you're using CSS grid, you can apply the following CSS rule to the main tag:

.main { display: grid; height: 100vh; align-items: center; }

As for the attribution, consider decreasing the margin some, unless your intention is to hide it below the viewport.

I hope this is helpful. :)

Marked as helpful

1

@MorbitDemon

Posted

@natashapl That is indeed very helpful, thank you so much Natasha :3 !!

1

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