Responsive Porduct preview card component Using CSS Flexbox

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Sai, I think you did a really great job here, especially as this is your first FEM challenge. I also just completed this challenge, and I wanted to reply to the point you made about changing images between mobile and desktop views:

  While I think your workaround solution using content: "" was pretty clever, you'll see in your report that there's an issue with accessibility, namely regarding your <img> not having a source image. What you can do instead is to use background-image:. To do that, first replace your <img> in the HTML with an empty <div> along with a class for the image:

  <div class="preview-img"></div>
  

  And in then in your CSS, add this:

  .preview-img {
    background-image: url("./images/image-product-mobile.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 15rem;  // this is just what I used, feel free to experiment!
  }
  

  Then add a media query to change the image to the desktop version:

  @media (min-width: 750px) {
    background-image: url("./images/image-product-desktop.jpg");
    height: 100%; 
  }
  

  Hope this helps, and welcome to Frontend Mentor!

  Marked as helpful

  1
• 

  Pradeep Saini•990

  @pradeeps4iniPosted over 2 years ago

  Hi, Sal.

  • You can use <picture> element to change the different sized same image respective to the width of the viewport.

  • You can create utility classes for the properties that you use o multiple elements. For example:

  .flex { display: flex; } Now, you can use class="flex", on elements where you want to use flexbox.

  Marked as helpful

  0