FLEXBOX|GRID

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 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! 🎆🎊🪅

  Marked as helpful

  1

  ---

  

  Nelson•2,390

  @nelsonleonePosted almost 2 years ago

  @vcarames nah.....since it seems your soul is clung to this particular badge , you can have it , just want one .

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @nelsonleone

  The badges are meaningless…

  Believe it or not…. I have no interest in the badges or ranking system (honestly, I wish they weren’t part of the FEM site) my only interest is helping others grow and make the learning process easier (hence why I provide all the links to where I learned the materials on my feedbacks).

  This a learning community (not social media) so I think it’s best to move on as professional and continue helping the FEM community.

  Happy Coding! 🎆🎊🪅

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 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

  Marked as helpful

  1