A product Page using HTML & CSS only

Community feedback

• 

  Dimitar Radev•930

  @Mitko90Posted 11 months ago

  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

  Marked as helpful

  0