Pricing component with toggle

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, really great work on this one. Desktop layout is great, it is somehow responsive but I think 1000px for mobile state is too early too big, desktop layout could use more of those, however mobile layout looks great.

  Some other suggestions would be:

  • body tag does not need width: 100% since by default block element uses 100% of the width. Same with the main.
  • Avoid using vh unit in the height property as this is not consistent and only uses the remaining viewport screen. Try seeing the site on dev tools at the bottom, hover on the body tag, you will notice it doesn't occupy the whole layout because of the vh unit. Use rem instead or just let the padding/margin of the element define the whole layout's size.
  • Avoid using multiple h1 on a page, use only at least 1 per page.
  • On the toggle section, a proper markup on this is to use 2 radio buttons, the two text on the sides are the label for their respective radio buttons. Now this setup is a bit trickier to do, have a look at Grace's solution for this one. You will a proper markup on it. Also if you want, I have a simple snippet as well that uses the same markup on that one, this is the sample snipptet here you can tweak it and learn about the structuring.
  • Avoid using id attribute as a selector in css because it is a bad practice due to css specificity. Use class to target elements.
  • Those 3 items on each card, the text that are sandwiched on a horizontal lines, you should have used ul on those since those are "list" of information about the respective plan that the user will choose. You can see more about the proper markup on the link that I attached with Grace's solution.

  Lastly, just go through her solution and if you have any queries, just let me know in here okay. Again, great job on this one.

  Marked as helpful

  1

  ---

  

  Gaurav Kumar•570

  @GauravkumarioPosted about 3 years ago

  @pikamart thank you for feedback. I liked your suggestions and your explanation. I will try to make more reliable projects.

  1