product preview card using CSS flex

Community feedback

• 

  Sadeek_Akbik•380

  @Ahmad-Akbik-fPosted 4 months ago

  So...Hi there it's me a jounior web dev : I saw your code AND you DID VERY GOOD JOB with IT , But here is some of my tips

  1 - make the main pic inside a div and don't make it like a background image : HTML code

  <div class = "image-holder"> 
      <img src = "img" alt = "some text">
  </div>
  

  CSS code

  .image-holder{
      width: 100%;
      height :100%;
  }
  .image-holder img{
     max-width:100%;
  }
  

  That is it for now , and if you want any extra help dont hesitat to ask me for tips .

  Marked as helpful

  0

  ---

  

  somayakhaled•290

  @somayakhaledPosted 4 months ago

  @Ahmad-Akbik-f
  but how can i switch between the product image for the mobile and the image for the desktop desight if i used the img tag? using background-image is best way i could found to switch between them, please tell me if there is better way to do it. thank you for your comment.

  0

  

  Sadeek_Akbik•380

  @Ahmad-Akbik-fPosted 4 months ago

  @somayakhaled so there is a way I am using it which is : adding two images one for the mobile and one for the desktop and then add classes for theme and use css for displaying them depending on the screen max width HTML code:

  <div class = "image-holder"> 
      <img src = "img" class="desktopImg" alt = "some text">
  <img src = "img" class="mobileImg" alt = "some text">
  </div>
  

  CSS code :

  .mobileImg{
      display:none;
  }
  @media (max-width:375px){
      .desktopImg{
          display:none;
      }
      .mobileImg{
          disblay:block;
      }
  }
  

  Marked as helpful

  0

  

  somayakhaled•290

  @somayakhaledPosted 4 months ago

  @Ahmad-Akbik-f that is nice thank you

  0

  

  Sadeek_Akbik•380

  @Ahmad-Akbik-fPosted 4 months ago

  @somayakhaled you welcome

  0