Product-Card component

Community feedback

• 

  P

  beowulf1958•1,450

  @beowulf1958Posted 4 months ago

  Congratulations on completing this challenge! The desktop version looks good. However, it would look better if it were centered on the page, instead of pushed down 300px. check out this article. Also, the design calls for the image to be round on the left side. Try this:

  .image{
      /* display:flex; */
      width:50%;
      overflow: hidden; 
      border-radius: 15px 0 0 15px;
  }
  img{
      max-width:100%;
      display: block;
  }
  

  Now about the media query. You did a great job, it just needs a little tweak. To make the image go all the way to the top of the container, apply a negative margin; In the media query

    .image{
      width:100%;
      border-radius: 15px 15px 0 0;
      margin-top: -50px; 
    }
  

  The reason the image doesn't look right is that it is the wrong image. The heart of this challenge is to find a way to swap out the desktop image with the mobile image in the media query. There are several ways of doing this, but I think the simplest way is to use display: none and display: block to make the second image disappear.

  In the html, add both img to .image

          <div class="image">
              <img src="images/image-product-desktop.jpg" alt="Parfum name Gabrielle Chanel brand " class="desktop">
              <img src="images/image-product-mobile.jpg" alt="Parfum name Gabrielle Chanel brand" class="mobile">
          </div>
  

  Hide the mobile image with .mobile { display: none; }

  Then in the media query, switch them up:

    
   .desktop{
      display: none;
   }
   .mobile{
      display: block;
   }
  

  Hope this helps. Keep on coding.

  Marked as helpful

  0

  ---

  

  CatalinaG•220

  @cgojkPosted 4 months ago

  Thank you very much @beowulf1958

  0