Single price grid component using HTML and CSS

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  You forgot to add a media query for the mobile design, in the media query reduce the width of .container, for a responsive replace the width with a max-width. Change the grid-template columns value 1, there is no need for grid template rows. for more on media queries click here

  e.g. :

  @media (max-width: 600px){
  .container{
    max-width: 25rem;
   grid-template-columns: 1fr;
  }
  }
  

  Hope am helpful

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  0

  ---

  

  Shubh Patel•110

  @ShubhPatel06Posted almost 2 years ago

  @Hassiai Thank you, i shall add it

  0

  

  Shubh Patel•110

  @ShubhPatel06Posted almost 2 years ago

  @Hassiai I tired to add the media query but it refuses to work. The design remains the same as desktop view. Any idea why that is happening?

  0

  

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  @ShubhPatel06

  it doesn't work because .container is only give a grid-template-column value. Add grid-template-rows: repeat(3, 17rem;); to .container In each grid-item give them a grid-row value. e.g .information{ grid-row:1; } give the next item a grid-row of 2 and the last grid-row of three.

  Hope am helpful.

  if you find the mobile design difficult after you've done the desktop i will advice you begin with mobile first. that will be a little easier

  Marked as helpful

  0

  

  Shubh Patel•110

  @ShubhPatel06Posted almost 2 years ago

  @Hassiai Yes it worked, thank you.

  1