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

Responsive Landing Page using CSS grid and flex

Yaungni 100

@Yaungni-Linn-Latt

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


Thank you, Kevin Powell, for teaching me CSS grid and flex.

Community feedback

@IEdiong

Posted

Hello Yaungni 👋, some suggestions here:

  • You could set a max-width on the main .grid-box and then change the layout when the screen width is wide enough to display the content without squishing it. This is for better responsiveness. You could have a look at mine here to see how I achieved this.
  • The learn more buttons aren't styled properly.
  • Also, look into the HTML issue raised here.

I hope this was helpful, Shalom!

Marked as helpful

1

Yaungni 100

@Yaungni-Linn-Latt

Posted

@IEdiong Thank you for your suggestions. I have updated my files with your suggestion. However, the buttons are styled according to my view.

0

@IEdiong

Posted

@Yaungni-Linn-Latt The background of the buttons are meant to be white and then transparent on hover state. Yours is the reverse.

Are you seeing it now?

Marked as helpful

0
Yaungni 100

@Yaungni-Linn-Latt

Posted

@IEdiong I see thank you

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