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

Single price grid component using grid

@TaskinSultana

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


It's my first grid challenge and I loved it....While doing this challenge I have faced few grid template issues...Like how to identify column width and row width...need solution for it.. Please do suggest me some grid tricks and tips. Please do tell me if I have made any mistake....and I'd be grateful if you can give me some feedbacks to improve 🙏

Community feedback

romila 3,570

@romila2003

Posted

Hi Taksin,

Congratulations 🎉 for completing this challenge, your CSS Grid component looks great, and it is great that you used flex to center the card. Also, it is great that you used the right semantic for your code.

  1. Even though it is great that you used a media query, I would suggest using 1 for this project to prevent unnecessary use of the media query. As you adjust the screen size from mobile to desktop, you can remove the media query and just keep the same properties used for the .grid. I would suggest adjusting the width properties so that the card does not exceed a certain width e.g.
.grid {
  max-width: 800px;
  width: 100%;
}

body {
  margin: 0 10px;
}

I included the margin property for the body so that the card does not touch the side of the screen.

Also, I would strongly suggest for future projects that you follow a mobile-first approach as it will be easier for responsiveness and changing/rearranging the elements within your body.

Overall, great attempt and wish you the best for your future projects so keep coding 👍.

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