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

I used float to place the two boxes next to each other

@devourer999

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


I initially found setting the boxes next to each other a problem cause I tried all i could think of, but finally I was able to work it out.

Community feedback

@VCarames

Posted

Hey @devourer999, some suggestions to improve you code:

  • To center you content to your page, add the following to your Body Element:
body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}
  • This entire component should have been built using CSS Grid as the challenge name implies. If you are not comfortable using CSS Grid or do not know how use it, here is a link that is all about how to use CSS Grid:

https://css-tricks.com/snippets/css/complete-guide-grid/

  • There are three headings in this component; “Join our community”, “Monthly Subscription”, and “Why us”. They need be wrapped in a header element.

  • Your button needs to have box-shadow, cursor: pointer and a :hover.

  • Your content is not fully responsive. Here is a link to Google Developer’s site that will teach you how make it 100% responsive:

https://web.dev/learn/design/

Happy Coding! 👻🎃

Marked as helpful

1

@devourer999

Posted

@vcarames Thank you so much, this is gonna be really useful to me🤗

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