Responsive landing page using media queries

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

  Hi @sam-mantey 👋, good job for completing this challenge! 🎉

  You can use mobile-first approach because you would already have a responsive page from the beginning, in my opinion it is easier, congratulations for using it..

  Tips:

  • You can use <picture> tag when you need to change the image on different viewports, using this tag will prevent the browser from loading both images, saving bandwidth. More information here

  Example:

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

  • You could use the <del> tag to display the old price:

  <del class="old-price">
     <span class="sr-only">Old price: </span>$169.99
  </del>
  

  Note that I added the <span> with the sr-only class to the del element, this will provide more information about what your old price is about.

  The sr-only class is a class that you can add to hide content visually but is only visible to screen-readers:

  .sr-only {
    clip: rect(0 0 0 0); 
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap; 
    width: 1px;
  }
  

  More information here

  I hope those tips will help you.

  Good Job and happy coding !

  Marked as helpful

  1

  ---

  

  Samuel Mantey Asare-Adjei•40

  @sam-manteyPosted about 2 years ago

  @MelvinAguilar Thank you so much. I have learned a lot from you today. I will make the necessary changes to my solution.

  1