responsive enough

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  Give the alt attribute in the img a value. The value of the alt attribute is the description of the image. For decorative images like icons, there is no need to give it an alt value, for more on alt attribute Click here.

  For the color of image, give .image-container a background-color of soft violet and give the img a width and height of 100%, mix-blend-mode: multiply , opacity: 0.8 and object-fit: cover.

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

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  1

  ---

  

  aaish•310

  @aaishverPosted over 1 year ago

  @Hassiai thank you, i dont remember the number but I have seen too many vedios for this blend thing still inlast I did it with overlay div just to complete my challenge . really helpful

  0
• 

  Shashikant•430

  @shashikantdev3Posted over 1 year ago

  Hello there 👋. Good job on completing the challenge!

  Here are some suggestions regarding your code that may interest you.

  For Responsiveness, especially for mobile screens

  Your solution for desktop screen size looks excellent, but for Mobile screens, try to add more CSS to your media query. try using Flex or Grid to make it responsive for mobile screens.

  Below is the link to my solution repo, please feel free to take a look and get the idea of proper restructuring of media queries, accessibility and usage of utility class and be careful when you use GRID and Flex.

  My Solution Repo

  You can see the tutorial, where Kevin explain all these things very clearly, below, is the YouTube link for the tutorial.

  YouTube | Kevin Powell | Taking on a Frontend Mentor challenge | Responsive Product Preview Card Component

  I hope you find it helpful!😏 Above all, the solution you submitted is 👌. 🎉Happy coding!

  1

  ---

  

  aaish•310

  @aaishverPosted over 1 year ago

  @shashikantdev3 i do tried many but in the end to complete I did the responsiveness to last for the 375px for mobile screen as its the thing mentioned for mobile that's why

  0

  

  aaish•310

  @aaishverPosted over 1 year ago

  @shashikantdev3 have you seen the whole 1hr video for this website amazing bro you really dedicated

  0

  

  Shashikant•430

  @shashikantdev3Posted over 1 year ago

  @aaishver One pro tip that I follow while designing, use the Mobile-First Design approach which is first work on the smallest screen first and gradually work up to larger screen sizes.

  I hope you find it helpful!

  🎉Happy coding!

  0