FLEXBOX|GRID

Community feedback

• Account deletedPosted over 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • It is best practice ✅ to use, classes for styling purposes, while using ids solely for JavaScript.

  • Remove all br elements you added , they are being used incorrectly ❌ and not needed for this challenge.

  • This challenges requires the use of two images 🎑 at different breakpoints. ⚠️ The picture element will facilitate this.

  Syntax:

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

  More Info: 📚

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

  • For improved accessibility 📈 for your content, it is best practice to use em for media-queries. Using this unit gives users the ability to scale elements up and down, relative to a set value.

  • Implement a "Mobile First" approach 📱 > 🖥

  Mobile devices are now the dominant 👑 way in which people browse the web, it is critical that your website/content looks perfect on all mobile devices.

  More Info: 📚

  Mobile First

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding! 🎆🎊🪅

  12

  Marked as helpful
• 

  Hassia Issah•50,390

  @Hassiai

  Posted over 2 years ago

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  For the color of the image, give .picholder a background-color of soft-violet and add object-fit: cover; mix-blend-mode: multiply and opacity: 0.8 to the img .

  .picholdet{
  background-color: hsl();
  }
  img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  opacity: 0.8;
  }
  

  In the media query increase the width value of .cardholder.

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  10

  Marked as helpful