i used the flex display making the card more responsive for web/mobile

Community feedback

• 

  Jeck•1,080

  @j-tomajinPosted about 2 years ago

  HELLO!

  • you can use the <picture> tag:

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

  • This will automatically switches the images with the given min-width.

  • use semantic tags such as <main>, <section>, <article> and so on. It is actually a good practice using semantic tags.

  • also use letter-spacing for the perfume

  HOPE IT HELPS. HAPPY CODING! :D

  0

  ---

  

  Creepy01•10

  @Creepy01Posted about 2 years ago

  @AsukalDePapa For semantic tags and I can't see their utility, the page being just a product card. Is it possible for you to explain the picture tag ?

  0

  

  Jeck•1,080

  @j-tomajinPosted almost 2 years ago

  @Creepy01

  • you can use the <main> instead of .container. <main> is where you put the most important part of your web page. You can use article to separate block of elements.
  • the <picture> with the source:media basically switches the image you declare in the srcset with the given min-width inside the <source>.

  Marked as helpful

  0