soln for statuspreview by vimal

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello @vimalathithan17, congratulations for your new solution!

  Here's some tips to improve your solution overall:

  Your component is perfect, but is not responsive yet, this is due the fixed width you've applied to the container. Look both width and max-width the main difference between these properties is that the first(width) is fixed and the second(max-width) is flexible

  Make the mobile version using flex-direction: column:

  .container {
      flex-direction: column;
  }
  

  Instead of use this line of code you can use a shortcut for the image effect:

  .transclr {
      position: absolute;
      background-color: hsl(277, 88%, 43%);
      opacity: 45%;
  }
  

  Instead use mix-blend-mode to make this color blend between the image and the background-color of the container. See the steps below to apply to the img or picture selector:

  img {
  mix-blend-mode: multiply;
  opacity: 75%;}
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  vimalathithan•110

  @vimalathithan17Posted about 2 years ago

  @correlucas thank you for pointing the things that I have to change...it really helps a lot 😄

  0