Mobile first single-price-grid

Community feedback

• 

  Andrés Galván•45

  @afgalvanPosted almost 4 years ago

  It's pretty accurate, but you could import the font-family from google fonts here https://fonts.google.com/specimen/Karla?query=karla.

  Also, the border-radius could be easily done by: .flex-left { border-radius: 0 0 8px; }

  .flex-right { border-radius: 0 0 8px; }

  And the last tip, try respecting the HTML indentation you use.

  1

  ---

  

  William Larry•70

  @WillarryPosted almost 4 years ago

  @afgalvan Thanks for your feedback, will look into it.

  0
• 

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  Hi William,

  Well done :D

  I have checked your HTML structure, a few tips from me:

  • instead of <div class="container"> you can use the section tag;
  • this is a single page component so you can add h1 tag;
  • in the second card you can use p tag with two spans inside for the price and per month;
  • don't use ID's (you will use them with JS);
  • what do you think about link instead of a button?
  • please use a proper spacing in your HTML structure because at the moment it is quite difficult to read;
  • removing the outline from a button it is a bad practice (accessibility matter);

  @afgaIvan mentioned already: try to use proper font, add border radius. Also check your project by the inspector in your browser on different devices (especially on mobiles => fix margin).

  That's it from me. Ps. Don't forget to upvote any comments on here that you find helpful.

  Greetings :D

  0

  ---

  

  William Larry•70

  @WillarryPosted almost 4 years ago

  @SzymonRojek Thank you for taking time to check out my code, I have made some changes.

  0

  

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  @Willarry

  I am glad your like it :D

  1