Responsive Stats Preview Card with both CSS Flexbox and Grid

Community feedback

• 

  Devmor•470

  @devmor-jPosted over 2 years ago

  Hey this is great ✨

  You did it, it looks good. Here are some of my suggestions and answer to your question:

  1️⃣ Even though the sizes are fine on 100% zoom (initial zoom on most browsers), the ux is not very well when user zooms in/out. I went through your code and I suggest get rid of absolute position on .cont class and overall it's not a best practice to use it anyway (unless we have to). In this case we can achive centering simply with these refactoring:

  First remove these rules from .cont class:

  .cont {
      top: 50%;
      left: 50%;
      width: 75%;
      height: 60%;
      overflow: hidden;
      position: absolute;
      transform: translate(-50%, -50%);
  }
  

  Then insert these properties to .cont class:

  .cont {
    /* adjust 56rem size (this is just a good starting point) */
    width: min(100%, 56rem);
    margin: auto;
  }
  

  Finally add these rules to your body element to center it's content:

  body {
    display: flex;
    min-height: 100vh;
    margin: 0;
  }
  

  Now you have a great zooming capability and did not mess with the positioning (which means easier styles to maintain).

  2️⃣ Your image overlay looks ok but if you want to be percise then try to use mix-blend-mode: multiply then adjust opacity around 0.8.

  3️⃣when you've applied these refactorings, don't forget about @media queries and make sure their fine too.

  I liked your solution and keep going ✌ 🦄

  Marked as helpful

  1

  ---

  

  Rawley•160

  @EbotRawleyPosted over 2 years ago

  @devmor-j Thank you, I'll work on it !!

  1

  

  Devmor•470

  @devmor-jPosted over 2 years ago

  @EbotRawley you're welcome dear 🌹

  1

  

  Rawley•160

  @EbotRawleyPosted over 2 years ago

  @devmor-j I just revised it as you said and I added back overflow: hidden to .cont class so that the image will fit into the rounded borders of the container. Thanks Again ...

  1