A product Page using HTML & CSS only

Hey there,

It looks great.

One thing I've noticed is that when I'm looking at it on my phone, the image doesn't load. My advice is to always check all your pages on your phone (not only browser's responsive mode).

I can offer a solution to the image problem.

There are a couple of ways to swap the images between screen sizes:

• Using the picture tag in HTML

You can set this in html file. It will look something like this

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

This is how I've done it and you can, if you want, view my submission here.

• Using the display property in CSS

You can add both of your images in the html one after the other and in the CSS display one as block and one as none. Then switch them in the media queries.

HTML

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

CSS

.desktop{
    display: block;
}

.mobile{
    display: none;
}

@media{
    .desktop{
        display: none;
    }
    
   .mobile{
       .display: block; 
   }
}

Hope I could help.

Happy coding