Respinsive Product Preview Card using HTML and CSS

Community feedback

• 

  Fidel Lim•2,775

  @fidellim

  Posted over 2 years ago

  Hi @Petabyte,

  Congrats on finishing the project!

  To remove the white background color below your image, you could just set your image tag as a block.

  .image img {
      display: block;
      width: 300px;
      border-radius: 10px 0px 0px 10px;
  }
  

  The code above should fix that issue.

  If you are also interested in removing the warning on your accessibility report, you can add this block of code:

  <div class="attribution">
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
      Coded by <a href="https://www.frontendmentor.io/profile/peta-8-bit">Petabyte</a>.
    </div>
  

  inside a <footer> tag.

  Let me know if it works!

  14

  Marked as helpful
• 

  Amal Karim ✅•1,290

  @amalkarim

  Posted over 2 years ago

  Instead of using "picture" element like code below

  <div class="image">
    <picture>
      <source media="(max-width:600px)" srcset="image-product-mobile.jpg">
      <img src="image-product-desktop.jpg" alt="image of product">
    </picture>
  </div>
  

  Try this

  <div class="image">
    <img class="img-desktop" src="image-product-desktop.jpg" alt="image of product">
    <img class="img-mobile" src="image-product-mobile.jpg" alt="image of product">
  </div>
  

  Then in your css, give those two images styling that will show and hide them at the right condition

  .img-desktop {
    display: block;
  }
  .img-mobile {
    display: none;
  }
  
  @media screen and (max-width: 600px) {
    .img-desktop {
      display: none;
    }
    .img-mobile {
      display: block;
    }
  }
  

  Some advice: Give your "main" element min-height: 100vh; instead of height: 100vh;, to avoid some parts of the page hidden when the height of the page is taller than the browser (mainly in mobile view). I also recommend display: grid for "body" element, it could give you more flexible, simple, and robust layout. Read this article in Css Tricks to gain basic understanding about CSS Grid. Last but not least, wrap your <div class="attribution">...</div> inside <footer>...</footer> to get rid the warning message in Accessibility Report.

  Hope this helps!

  11

  Marked as helpful
• 

  Frank Ruiz•410

  @fruizotero

  Posted over 2 years ago

  I think they already helped you with some solutions, but in case you want to try it some other way.

  The white space you see below the image is due to line-hieght.
  You can fix it by adding the following

  .card {
      line-height: 0;
  }
  
  .cardtext {
      line-height: normal;
  }
  

  Here you can read more about it
  line-height

  11