Single price grid component

Community feedback

• 

  Rio Cantre•9,690

  @RioCantrePosted almost 3 years ago

  Hello there! Awesome job with this one! Viewing your solution you did well with the design. I would only suggest the following for you...

  • Change the color value of the background in .bottom__right into background: hsla(180, 39%, 56%, 1);
  • Change the font color of the .bottom__right p into color: var(--light-gray);
  • Wrap the container with specific tag like main
  • Add a padding to the attribution in smaller view

  Hope this helps and Keep up the good work!

  Marked as helpful

  1

  ---

  

  Mario•180

  @bembem33Posted almost 3 years ago

  @RioCantre Hello... Thank you! This is what I looking for background: hsla(180, 39%, 56%, ### 1 ###); , I try to find the color by myself but without a success.

  1

  

  Rio Cantre•9,690

  @RioCantrePosted almost 3 years ago

  @bembem33 Don't mention it, if your using google chrome there is an extension called ColorZilla, you can download it and use it to pick colors.

  Marked as helpful

  1
• 

  Naveen Gumaste•10,480

  @NaveenGumastePosted almost 3 years ago

  Hay ! Good Job you made it look nearly perfect to the preview

  These below mentioned tricks will help you remove any Accessibility Issues

  -> Add Main tag after body like it should be your container

  -> For 1st heading or h1 tag, use header tag and then inside the header put your h1 or h2 etc

  -> But use header tag only once in main heading element.

  -> Always use h1 first and then h2, h3 and so on

  Keep up the good work!

  Marked as helpful

  0
• 

  Abhik•4,840

  @abhik-bPosted almost 3 years ago

  👋 Hello Mario , Your solution looks absolutely amazing on large screens & the card looks very responsive.

  Some of my opinions to make it look nicer in small screens as well :

  • use this styles in body

  justify-content: center; */ remove this line it is of no use */
      min-height: 100vh;   */ so that for small screens body's height can increase*/ 
      grid-template-rows: 1fr auto; */ so that container & footer can be displayed without position relative*/
      gap: 2em; */ so that footer can have some spacing from the container*/
      padding: 4em 0; */ so that container can have some spacing from top without  using position relative & top*/
  

  • remove the max-height from container
  • remove position : relative & top from container & footer

  Please keep up with this amazing work 👍

  Marked as helpful

  0