Price Page using Grid

Community feedback

• 

  P. Ricardo•2,370

  @pRicard0Posted over 1 year ago

  Good job! Your design looks pretty good.

  Some HTML tips

  • You should not use <p> to wrap two <span>.
  • You can use <em> instead of the span with the price 29$. The <em> tag is used to define emphasized text.

  CSS tips

  • You can use flexbox to center the 'per month' text next to the price.

  p {
  display: flex;
  align-items: center;
  }
  

  But of course, you need a class and to change the tag

  1
• 

  Divine Ugorji•350

  @DivineUgorjiPosted over 1 year ago

  My approach for centering the "per month" with relation to the "$29" was to wrap the two of them in a container using the div element. Then target the div element class id and apply flex to it. For example; In the HTML file,

  <div class="pricing-list> <p>$29<p/> <p>per month<p/> </div>
  

  The CSS file;

  .pricing-list { display: flex;
  align-items: center; 
  }
  

  I do hope this helps. Good work on your project. Keep coding.

  0