Respinsive Product Preview Card using HTML and CSS

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!

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!

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