Responsive website using html and css

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey @simplykoon, some suggestions to improve you code:

  • The Alt Tag Description for the image needs to be improved upon. You want to describe what the image is; they need to be readable. Assume you’re describing the image to someone.

  • This challenges requires the use of two images 🎑 for different breakpoints. The Picture Element will facilitate this.

  Here is an example of how it works: EXAMPLE

  Syntax:

    <picture>
      <source media="(min-width: )" srcset="">
      <img src="" alt="">
    </picture>
  

  More Info:

  https://www.w3schools.com/html/html_images_picture.asp

  https://web.dev/learn/design/picture-element/

  • The name of the perfume , “Gabrielle Essence Eau De Parfum” is the most important content in your card so it should be wrapped in a Heading Element.

  • Your button needs to have a cursor: pointer.

  Happy Coding! 👻🎃

  Marked as helpful

  1

  ---

  

  simplykoon•130

  @simplykoonPosted about 2 years ago

  @vcarames Thank you so much for the tips. I'll work in it🤗🤗🤗

  0
• 

  Zarko Petrov•210

  @zp021Posted about 2 years ago

  Hi! What I did for the button was align-items: center; and justify-content: center; Also for the images you can use <picture> tag to handle the change of images from mobile to desktop view:

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

  Keep it up and happy coding!

  Marked as helpful

  1

  ---

  

  Muhammad Al-Ameen Abdullahi•260

  @al-ameen36Posted about 2 years ago

  @zp021 You forgot to mention display: flex; too

  0

  

  simplykoon•130

  @simplykoonPosted about 2 years ago

  @zp021 I also saw this when I searched for best ways to include different pictures for different screen sizes. I wasn't sure about what the min-width should be so I decided against it. I'll definitely try this though. Thank you for taking the time🥺🥺

  0