Responsive Stats-Card Solution

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey, good work on this one. Though the desktop layout is pushed onto the top but the mobile view is good.

  For the image color, since you used the image as img, you could add a background-color: hsl(277, 64%, 61%) (purplish one) on the imageContainer selector. Then just manipulate the opacity of the img that holds the image. That way, the purple color will now be visible and adjust to your preference^

  Other suggestions would be:

  1. To center your layout on the desktop, you could add in the body like:

  display: grid;
  min-height: 100vh;
  place-content: center;
  padding-top: adjust to make the layout not touch the ceiling
  

  2. On the text, they should not be centered right. So in your description selector, remove the align-items: flex-end, let them be at the left position. But by doing so, your elements inside the stats container will be pushed more on the left, because you used position: relative and used the right property on them. It will be really awesome if you could remove them, since they are not really necessary on this one.

  2.1. Remove the padding on the stats selector, also edit the padding on the 3 divs inside of it. Only apply padding to the top and right, like `padding: 50px 25px 0 0;

  3. The width of the layout could be smaller :>

  But still, good job on this one ^

  0

  ---

  

  alexandria•35

  @ironheart93Posted over 3 years ago

  @pikamart Thank you, I made some changes, it's not exactly perfect but I understand a little better as to what I am doing.

  0