Kevin Powell - Community•2mo ago

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>

<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;
}

.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;

@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;

5 Replies

Smix•2mo ago

can you put this on code pen? images also.

clevermissfox•2mo ago

Try this

<picture class="card__pic-img">
  <source
    srcset="/images/image-product-desktop.jpg"
    media="(min-width: 601px)"
  />
  <source
    srcset="/images/image-product-mobile.jpg"
    media="(max-width: 600px)"
  />
  <img
    class="card__img"
    src="/images/image-product-mobile.jpg"
    alt="Image of perfume"
  />
</picture>

<picture class="card__pic-img">
  <source
    srcset="/images/image-product-desktop.jpg"
    media="(min-width: 601px)"
  />
  <source
    srcset="/images/image-product-mobile.jpg"
    media="(max-width: 600px)"
  />
  <img
    class="card__img"
    src="/images/image-product-mobile.jpg"
    alt="Image of perfume"
  />
</picture>

- The <source> elements should be ordered from the most specific to the least specific. In this case, the desktop image should be listed first because it applies to a broader range of screen sizes (601px and up). - The mobile image should be listed second, targeting screens with a maximum width of 600px. 2. Media Queries: - The media query for the desktop image should start at 601px to avoid overlap with the mobile query. This ensures that there is no ambiguity when the screen width is exactly 600px.

Stroudy•2mo ago

I figured out the issue after over 1 hour of pulling my hair out, turns out I was targeting the wrong selector, I was using the correct properties but on the wrong selector then went down a rabbit hole and it was something so simple. I have made the change you have suggested, Thank you so much for responding ❤️ p.s how does your code snippet have color and mine doesnt?

  
.card__img {
    border-radius: 10px 0 0 10px;
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  
.card__img {
    border-radius: 10px 0 0 10px;
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

Next time i will use code pen probably for the best as you can see whats happening more 😄

clevermissfox•2mo ago

Are you using your dev tools? That’s usually where I start to see if my properties are crossed out, if I’ve made a typo , if they are even being applied to the selector etc. As for the code blocks you out in the three backticks and then after the third one put the language

html

html

Or ```css And start your code on the line undeneath then of course close the block with the three backticks

Stroudy•2mo ago

Yeah always, problem was I was looking for a problem to much and similar selector names just needed to get away for abit get some fresh eyes

Gaming

Programming

Problem with Imgage not filling in space is caused by padding