Responsive Product Page Using Flex

Community feedback

• 

  Adriano•38,120

  @AdrianoEscarabotePosted about 2 years ago

  Hi Elias Lind, how are you?

  I really liked the result of your project, but I have some tips that I think you will enjoy:

  • every Html document must contain the main tag, so we can identify the main content, to fix this, wrap all the content with the main tag. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.
  • to improve your code, you can do this:

  button {
      cursor: pointer;
  }
  

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  0

  ---

  

  Elias Lind•130

  @EL132Posted about 2 years ago

  @AdrianoEscarabote Hey Adriano, thank you so much! After you mention the main content concept, it sounds very familiar :) I'll fix my code and use these tips for my next projects!

  0

  

  Adriano•38,120

  @AdrianoEscarabotePosted about 2 years ago

  @EL132 happy coding!!

  0
• 

  Mohammad Raza•120

  @Raza7522Posted about 2 years ago

  Here is the thing you can consider:

  Instead of using 2 <img> tags you should use a <picture> tag:

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

  Here both images are given in a same tag one with a condition of min-width which will be displayed on that condition automatically. You won't need to crop the image. Hope it helps.

  0

  ---

  

  Elias Lind•130

  @EL132Posted about 2 years ago

  @Raza7522 Hello; thank you for the feedback! I didn't know about <picture>, that is a terrific piece of knowledge! Thank you very much.

  1