Kevin Powell - CommunityKP-C
Kevin Powell - Community•17mo ago•
8 replies
Stroudy

Problem with Imgage not filling in space is caused by padding

So I am struggling with this problem and I believe it has something to do with the <picture></picture> element because without it there is no problem. Still, I am using this element because I want the image to change to another at different screen sizes. I have tried a lot of solutions and can't figure it out any help would be highly appreciated ❤️ 
<picture class="card__pic-img">
          <source
            srcset="/images/image-product-mobile.jpg"
            media="(max-width: 600px)"
          />
          <source
            srcset="/images/image-product-desktop.jpg"
            media="(min-width: 600px)"
          />
          <img
            class="card__img"
            src="/images/image-product-mobile.jpg"
            alt="Image of perfume"
          />
        </picture>

.card__info {
  background-color: var(--clr-neutral-three);
  border-radius: 0 0 10px 10px;
  padding: 1.5rem;
}

.card__img {
  max-width: 100%;
  border-radius: 10px 10px 0 0;
  display: block;
}

@media only screen and (min-width: 600px) {
  body {
    background-color: var(--clr-primary-two);
  }
  .card {
    display: flex;
    padding: 0;
  }

  .card__pic-img {
    display: block;
    border: solid red 1px;
  }

  .card__img {
    border-radius: 10px 0 0 10px;
image.png
image.png
Was this page helpful?