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

Victoria 80

@victoriacesar

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


The mobile version looks great but with the desktop one i don't know why I couldn't center the container div, well, it upset me a lot, so if anyone knows why it would be great! Some feedback maybe? Thank you!

Community feedback

P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Hello there, Victoria! 👋

Well done on this challenge! 👍

I suggest adding a border-radius to the div.box and adding overflow: hidden to it so that none of the content inside it overflows the div.box and prevents the border-radius from being seen. Also, I think decreasing the width of the card component slightly in the mobile layout would make the card look a little bit better and the text inside it slightly nicer to read! 😉

Keep coding (and happy coding, too)! 😁

1

@carlosecontrer

Posted

Hi @victoriacesar, Congratulations, it looks great!

In my case I did it using flexbox and it worked, but I had "problems" with the semantics of the html...

I made my main box a flex container and then aligned and justified the content in the center.

My code was something like this:

container{
display: flex;
align-items: center;
justify-content: center;
}

Maybe this will help you, bye!

1

@Rabin92

Posted

Hey @victoriacesar,

Great job on this challenge!

It's responsive and looks great on all screen sizes. To center the div you can add the height: 100vh; to .container in your media queries.

Hope this helps & happy coding!

1

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