Single Price Grid Componennt using HTML and CSS

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey, great work on this one. Layout is just quite big than the original. But hey, you still did good on the layout. Just that the attribution text is overlapping the content. The mobile layout seems good, maybe just a little bit of padding on the left and right.

  Some suggestions would be:

  • do not position: absolute the attribution, remove it. Then you can just add flex-direction: column in your body tag. But applying this will make the layout not good, to fix, just simply remove the width: 800px property on your main element. You don't really need that one. Remove as well the margin: 0 auto on the main because the body tag does the job centering it. Remove the overflow as well.
  • for me, the "join our community" and "30-day, hassle-free money back guarantee" text could have been wrapped inside h1 tag with a span that wraps the second sentence and making it place in its own row. This is just preference though, haven't tackled this challenge yet.
  • again, for me, the "monthly subscription" along with the price below it could have been wrapped inside the h2 tag. The reason is that, when a screen reads that "monthly subscription" it will read as well the price, removing this blank space, if you know what I mean. Like "okay, so what is the price" something like that.
  • on the mobile state, remove the position: absolute again on the footer and instead, add a margin-top to it.

  Other than those, really great job. Almost what I said is personal preference so no worries. Aside from the stylings.

  Marked as helpful

  1

  ---

  

  Foti Ceci•55

  @fotinh0Posted over 3 years ago

  @pikamart Thank you for your great feedback and explanation. I made the suggested changes. Highly appreciated!

  0
• 

  Rachana Hegde•155

  @rachanahegdePosted over 3 years ago

  This looks really good and it's clearly responsive! Also nice work organising your code, it's readable and easy to navigate. Overall, great job.

  Marked as helpful

  1

  ---

  

  Foti Ceci•55

  @fotinh0Posted over 3 years ago

  @rachanahegde Thank you!

  1