Replacing the width/height attributes in source

HTML-CSS
1

Hi all.

I have this frontendmentor project. It’s done. Except when I submitted it , I got these warning messages , that basically said that <source> should not have width/height attributes (from line 65).

Very frustrating, as I saw these attributes used in several online tutorials, and removing these attributes breaks my code.

I have tried using this scss: See line 233 in the scss file.

@media screen and(min-width: 768px){
         
              picture{
                  min-width:840px;
                  min-height:534px;
              }
              source{
                 object-fit:cover;
              }
          }

And I have tried adding a width in the srcset :
srcset="./images/desktop-image-hero-1.jpg 840w"

And added the sizes attribute as well, as I read that’s needed or the 840w won’t work:
sizes="60vw"

See from line 65 .
But it’s not working as it should. I only changed the first carousel slide, left the other two with the width/heights attributes in <source>. The carousel image should touch the button on it’s side , the last two carousel images show this.

Here’s my github repo:

Hope someone is willing to share some insight.

Thanks!

2

I ran and cloned your project it looks like one image is not coming in full size. I spent some time trying to find out where your issue is on line 233 but the code stops before that in CSS The only thing I found in question was on line 70 or so in your HTML you have an empty alt=" " I would try to fill this in with something. Good luck