Responsive stats preview card component using css grids and flexbox

Community feedback

• 

  beowulf1958•1,890

  @beowulf1958

  Posted 16 days ago

  Congratulations on completing this challenge. Overall, the page looks great. Your markup is super clean and formatted for easy reading. The CSS has a nice flow, and separating the media queries from the main styles will make it simple to maintain and scale. This separation of concerns led me straight to the solution.

  I was intrigued by your problem. I also used a similar <picture> and sourceset arrangement with an overlay. Here's what I found:

  First, remove the height from the image (or set it to auto). This will allow the image to resize as expected. However, now the overlay bleeds out of the container. Next, adjust the height of the .img-container in the /* Below 320px */ styles in the media queries:

  /* BELOW 320px */
  @media (max-width: 25em) {
    html {
      font-size: 43.7%;
    }
      .img-container {
      height: 33rem;
      grid-row: 1;
    }
  }
  
  

  Now it work at 1440px and 375px. You may need to adjust the other sizes. Hope this helps

  01
• 

  Raven Matibag•210

  @ravenmatibag

  Posted 16 days ago

  I noticed that the image source is changing, but it only switches once the viewport reaches a minimum width of 600px. However, your layout switches to the mobile view at a 900px breakpoint, which might be why the image doesn't appear to update as expected.

  To fix this, try adjusting the max-width value in your media query to match your actual mobile breakpoint. For example, if your mobile layout starts at 900px, you can update this line:

  
  <source srcset="images/image-header-mobile.jpg" media="(max-width: 56.25em)" />
  

  Using 56.25em (which equals 900px) will ensure the image changes in sync with your layout.

  01