Solution Product preview card component

Community feedback

• 

  hitmorecode•6,680

  @hitmorecodePosted 11 days ago

  Congratulations well done, looks good. I have a few tips

  • You should take a look at the picture element. This is very handy when working with multiple pictures like in this case. With the picture element you don't have to turn them on or off with css.

  <picture>
     <source media="(min-width: 600px)" srcset="image"> // show this image until the screen is 600px wide. when the width < 600px show the image below.
     <source media="(min-width: 500px)" srcset="image"> // show this image until the screen is 500px wide. when the width < 500px show the image below
     <img src="image">
  </picture>
  

  • You should add transition to the button to make the hover animation smoother. transition: background 300ms ease-in-out;

  As for min and max in the media query, try this example and see if you can figure out what's going on. Just create an empty html file and add this to the css

  body {
     min-height: 100vh;
     background-color: hsl(120, 50%, 85%);
  }
  
  @media only screen and (max-width: 600px) {
     body {
        background-color: hsl(0, 0%, 25%);
     }
  }
  
  @media only screen and (max-width: 500px) {
     body {
        background-color: hsl(0, 20%, 25%);
     }
  }
  
  

  Play around with max-width after that change both media queries to min-width and see the difference between max and min.

  Hope you find this helpful and if you still have questions regarding this let me know.

  Keep it up 👍👌

  Marked as helpful

  1

  ---

  

  Den Mark•50

  @devmorkPosted 10 days ago

  @hitmorecode Thank you for the feedback. I will resubmit the solution with the tips you gave.

  0