Responsive stats preview card using HTML, CSS flexbox and media query

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  Hi again, Webdevsonu! 👋

  Congratulations on finishing another challenge! 🎉

  If you are following the mobile-first approach then you will use min-width media queries. So, there is nothing to be confused about.

  Regarding the scrollbar on the card, I recommend making the following changes:

  Remove all the code that I commented on.

  main {
      /* border: 1px solid none; */
     note: invalid value "none"
      border-radius: 10px;
      background-color: hsl(244, 38%, 16%);
      /* width: 60vw; */
     note: the card needs a max-width, not a width
      /* height: auto; */
     note: it's already the default behavior
      color: hsl(0, 0%, 100%);
      /* overflow: auto; */
      overflow: hidden;
      note: make the image follow the card's border-radius
      /* margin: auto; */
  }
  
  @media (min-width: 1024px)
  .contents {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      /* padding-right: 80px; */
      /* margin-top: 80px; */
  }
  

  Set all elements box-sizing: border-box. This way, the padding doesn't add more width to all elements.

  Make the img as a block element and set max-width: 100%. It makes working with img easier. Then, set width: 50% to the image.

  By doing those things, the overflowing should disappear. But, the card needs more adjustments to be responsive. I recommend simplifying the styling.

  I hope this helps. Happy coding!

  Marked as helpful

  0
• 

  Jerome Dela Cruz•210

  @noonecaresman023Posted almost 2 years ago

  Hello, what you can try to do is use background: url(./path) property so instead of having a <img> element you would have a div element which is going to be like <div class="img"><div class="color-overlay"></div></div>. Try to play around with it as it I think it gives you more freedom in manipulating images. Instead of having some of your css design property have a value of auto, try setting them with either rem, em or px. My other advice would be to use less divs in the future and use semantic html elements and for me at least, I try to avoid styles inside my html file, but I think for your case it works better. Good job!

  Marked as helpful

  0