Submitted about 2 years ago

HTML,CSS

Sukhmani Arora• 10

@Sukhmani252

Preview site View code

This is a solution for...

Single price grid component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I'm a beginner in web development. I had made the design but I am not sure that my way of making it is right or not. I want the suggestions for refactoring code and other ways to do this task more efficiently.

Community feedback

Travolgi 🍕• 31,460

@denielden

Posted about 2 years ago

Hi Sukhmani, good job! I took some time to look at your code and have some ideas for improving it:

add main tag and wrap the card for improve the Accessibility
remove all margin from .container class
use flexbox to the body for center the card. Read here -> best flex guide
after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
instead of using px try to use relative units of measurement -> read here

Overall you did well 😉

Hope this help and happy coding!

Sukhmani Arora• 10

@Sukhmani252

Posted about 2 years ago

@denielden Thank you so much for reviewing, these suggestions are really helpful.

I'll make these changes.

These important suggestions help a lot in growing and staying motivated.

Mahmoud ELshora• 40

@elshora

Posted about 2 years ago

That's cool.. you did well.

I think there is an issue, you need to center your main container. you can use flex to make it.

search on youtube if you need more info.

Sukhmani Arora• 10

@Sukhmani252

Posted about 2 years ago

@elshora Thanks for the feedback.

Yaa, actually I was having some issues in making it responsive.

I'll try again.

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