Single price grid component

Community feedback

• 

  aykutminikli•280

  @aykutminikliPosted almost 2 years ago

  Hello, congratz on finishing the challenge!

  From what i see, the auto in

  .card > * {
   max-width: 100%;
   margin: 0 auto 0;
  }
  

  distrupts your sizes of boxes. Can you try removing that line completely or auto and try the changes i said below.

  It shows you declared 1 column in the code below

  @media only screen and (min-width: 1024px)
  .card {
      grid-template-columns: 1fr;
      grid-template-rows: 40% 50%;
      max-width: 35rem;
  }
  

  in dekstop version if you want 2 even columns width you should making it by grid-template-columns: 1fr 1fr; or grid-template-columns: repeat(2, 1fr);

  also you should try making your rows by grid-template-rows: repeat(2, auto). This will create two rows with auto heights.

  After you make this changes you can give same paddings to your sections.

  Hope this was helpful.

  Marked as helpful

  1

  ---

  

  Mateo Rinland•210

  @mateorinlandPosted almost 2 years ago

  @aykutminikli Thanks a lot, it looked well before but now the paddings are better while the code is tidier and more coherent!

  0