Stats Preview Card — HTML, CSS

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi Juan, great job using a pseudo element here! Instead of anchoring it to the whole component, you can try putting the position: relative on the .card__image-header instead since that is the element that the overlay is being positioned with. In this way, whenever the image is resized, the overlay can be resized with the image and not the entire card.

  By the way, you can actually make the card more optimal and responsive; right now, if I change the breakpoint and allow the card to be resized, the overlay and also text starts shifting and looking out of place. What I would do is, I'd firstly remove the min-height from the pseudo-element and the img; instead, I'd change them to display: block so that they would take block properties instead of inline properties, and I'd give the image an object-fit: cover so that it won't look distorted when the width changes. I'd then change the breakpoint to something smaller (maybe try 980px) and give some margin/padding around the card so that there's space around it below the breakpoint. Lastly, for centering the whole card, I'd change the align-items property to align-content. Everything together would look like this:

  // functions as a normalize rule
  img, picture {
    display: block;
    max-width: 100%;
  }
  
  ...
  
  body {
    align-content: center;
  }
  
  .card__image-header {
    position: relative;
  }
  .card__image-header > img {
     // remove min-height: 240px;
  }
  .card__image-header::after {
    height: 100%;
     // remove min-height: 240px;
  }
  
  @media screen and (min-width: 980px) {
    .card__image-header > img {
      height: 100%; // this ensures the image height would match the card height
      object-fit: cover;
     // remove width: 540px
    }
    .card__image-header::after {
      border-radius: 0 0.625rem 0.625rem 0;
    }
  }
  

  Hope this helps you out!

  Marked as helpful

  1

  ---

  

  Juanca•220

  @juancaorgPosted about 2 years ago

  @elaineleung Hi Elaine 👋!

  Really appreciate your extensive feedback as always 🙌.

  You're totally right about the image distortion when the width changes.

  I implemented the 'normalize rule' for the img and picture element, i.e. use display: block so that they would take block properties instead of inline properties and the object-fit: cover as you suggested. Didn't know about this.

  This also fixed the issue that I had on having to use fixed heights so the image and overlay wouldn't distort that much, now it's looking much better.

  You're right that anchoring the ::after pseudo element to the whole component wasn't the best thing to do, I was stuck and scratching my head that anchoring it to the img wouldn't work. I learned today that ::before and ::after do not work on img elements, haha.

  Didn't think about anchoring to the picture element, or in this case .card__image-header. That works, thanks!

  I didn't use a breakpoint like 980px or smaller for the desktop version because the component is just too large, and it was working funny using smaller breakpoints. Might as well just use the mobile version for small viewports.

  And again, thanks for the centering tip. I changed align-items property to align-content and it's looking better. I have a question about this, tho.

  Do you know a way to move my footer element to the end of the page with this setup? 🤔

  When using the align-content property, every single element centered vertically just fine, but I can't find a way to move the footer to the end of the page. Using align-self doesn't work, only when the parent grid is using align-items.

  I'm scratching my head with this, I pushed it a little bit using margin-top, but doesn't seem optimal 😅

  Thanks in advance and again, thanks for your excellent feedback!

  1

  

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  @juancaorg You're welcome, Juan! About your question on pushing the footer to the bottom, you can try using grid-template-rows: auto min-content on the body selector and then just remove or comment out the align-content line. That's basically setting the height of the rows, where auto is for the main content and the min-content is for the footer. I normally use flexbox on the body selector, so I actually haven't tried using grid for pushing the footer to the bottom until now. Anyway, see whether that's what you're trying to achieve, and if not, let me know and we'll try something else!

  Marked as helpful

  1

  

  Juanca•220

  @juancaorgPosted about 2 years ago

  @elaineleung Thanks for your reply!

  I just tested out your tip and it totally works, awesome!

  But after you mentioned using flexbox on the body selector, I decided to go with that for simplicity, and using margin: auto for centering.

  I think that is easier to read and understand, getting basically the same result.

  Again, really appreciate your help! 🙌

  0
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Juanca, congratulations for your new solution!

  To make your hero image have the same look and the color purple overlay, you need to use mix-blend-mode using the multiply one.The mix-blend-mode CSS property sites how an element's content should blend with the content of the element's parent and the element's background.

  Instead of using all this code, you can do it all with two lines of code:

  .stats-preview-card::after {
      content: "";
      display: block;
      width: 100%;
      min-height: 240px;
      background-color: var(--soft-violet);
      border-radius: 0.625rem 0.625rem 0 0;
      opacity: 0.5;
      position: absolute;
      top: 0;
      left: 0;
  }
  

  Here’s how you can add this to your img selector: img { mix-blend-mode: multiply; opacity: 84%;}

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Juanca•220

  @juancaorgPosted about 2 years ago

  @correlucas Hey Lucas 👋!

  Really appreciate your feedback. For a moment I didn't get what you explained until I read the docs about mix-blend-mode.

  But reading your comment carefully, the key was 'should blend with the content of the element's parent and the element's background.' And you are totally right.

  I added a new parent element for the --soft-violet color and the mix-blend-mode to my image. The final result is much better and the code is easier to read.

  Thanks again 🤝

  1
• 

  ilyasazer•100

  @ilyasazerPosted about 2 years ago

  beautiful , good luck

  1

  ---

  

  Juanca•220

  @juancaorgPosted about 2 years ago

  @ilyasazer Thanks! 😄

  0