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 using css grid

#accessibility
Ibtissam 260

@Devibtissam

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


Well, this is the first challenge I have done to practice CSS grid, any advice on how to improve and honest feedback will be welcome. Happy coding.

Community feedback

@Jorahhh

Posted

I think you forgot to put the border radius at the whole grid.

Just put in the main container:

‘Border-radius: 10px;’ (or less)

And also in the mobile version in the first and last square.

This time you have to do in the first square:

Border-top-right-radius: 10px Birder-top-left-radius: 10px

…and in the last one:

Border-bottom-right-radius:10px; Border-bottom-left-radius: 10px;

For the rest, it seems fine. Nice job! 😀

Marked as helpful

0

Ibtissam 260

@Devibtissam

Posted

@Jorahhh oh I completely forgot about border-radius, thank you so much for your feedback

1
P
Grace 27,890

@grace-snow

Posted

Hi

It's really important to Indent your code consistently. Your code editor should even be able to do this for you.

It's also important to be more aware of html semantic structure. You cannot skip heading levels like this, page content should be contained by landmark elements (a main element, not just sections which are fairly meaningless), and that button should be an anchor tag because it would trigger navigation.

The only other styling issue I notice that's not already mentioned is the content touches the sides of my phone screen. There should always be some margin around the card or padding on an outer wrapper to prevent this

I hope this helps 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