Stats preview card component

Community feedback

• 

  Lucas Cerri•1,140

  @llKryptonixllPosted about 2 years ago

  Hey first of all great work. And I hope I can help you with your problem.

  to get an even split i changed your css like this:

  i added a min-height of 500px to the body and the card it is just for responsivenes not for the even split

  `body { background-color: var(--primary-background); height: 100vh; min-height: 500px; font-size: 15px; font-family: "Inter"; display: flex; justify-content: center; align-items: center; }

  .card { max-width: 1440px; width: 90%; height: 500px; max-height: 80%; display: grid; grid-template-columns: 50% 50%; /// I used grid on the card and created two columns 1 for the text and one for the image

  grid-template-rows: 100%; justify-content: center; align-items: center; background-color: var(--primary-card-background); border-radius: 8px; }

  .info { display: grid; // also used grid to align the text i think you have more control than using margins or paddings

  width: 90%;
  height: 90%; //////////// to give the text a distance to the card container, i set the width and height to 90% instead of 100% and centered the info container justify-self: center; // }

  then i also worked on the image to make it more responsive and added the purple layer

  figure { width: 100%; height: 100%; position: relative; this is important for the purple layer } figure img{ width: 100%; height: 100%; border-top-right-radius: 8px; border-bottom-right-radius: 8px; }

  // this is your purple layer i used the css after pseudo class and positioned the layer absolute to the figure element

  figure::after{ content: ''; position: absolute; left: 0; background-color: #4f2a67a6; width: 100%; height: 100%; border-top-right-radius: 8px; border-bottom-right-radius: 8px; }

  Marked as helpful

  1

  ---

  

  hemzi•30

  @hemziPosted about 2 years ago

  @llKryptonixll I just took my first real peek at grid today but I was thinking it would be overkill for 2 columns but I like how you implemented the split and mentioned the usefulness of spacing versus margin/padding.

  I feel like I had done a color overlay before using ::after but it's been a while. I really need to work on my consistency.

  Thank you for the feedback!

  0

  

  Lucas Cerri•1,140

  @llKryptonixllPosted about 2 years ago

  @hemzi no problem if you have questions feel free to ask.

  0