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

Four cards layout using CSS Grid

irene 120

@irene-panis

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

proud that i went with using css grid for this one, as usually i just use flexbox but i knew i'm worse at grid and needed the practice

What challenges did you encounter, and how did you overcome them?

making the mobile design... i wanted to learn how to implement the single column on mobile without a media query but in the end just used one. also as im typing this now im literally realizing i couldve just made the card container flex column on smaller screens instead of making a single column grid lol

What specific areas of your project would you like help with?

would like to know if there was indeed a way to implement the mobile design without media queries

Community feedback

@hmousavin

Posted

Quite nice! It's better than mines, since it's more similar to the desired images!

For an alternative to media queries on mobile design:

  1. "Container queries are an alternative to media queries, which apply styles to elements based on viewport size or other device characteristics."
  2. We can use Flex instead of media queries

Happy coding!

Marked as helpful

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