Responsive Product Preview Card Page

Community feedback

• 

  Mahmood•1,510

  @MahmoodHashemPosted 4 months ago

  Hey there! 🙋🏽‍♂️

  Congrats on finishing the challenge! ✅

  Your project looks awesome!

  Here are some helpful tips that you might find useful:

  Firstly:

  The border-radius property can take one to four values, depending on how you want to specify the rounding for each corner:

  1. Single value : If you provide a single value, it applies the same radius to all four corners.

     border-radius: 10px;
  

  2.Two values : If you provide two values, the first value applies to the top-left and bottom-right corners, and the second value applies to the top-right and bottom-left corners.

     border-radius: 10px20px;
  

  3.Three values : If you provide three values, the first value applies to the top-left corner, the second value applies to the top-right and bottom-left corners, and the third value applies to the bottom-right corner.

     border-radius: 10px20px30px;
  

  4.Four values : If you provide four values, they apply to the top-left, top-right, bottom-right, and bottom-left corners, respectively, in that order.

     border-radius: 10px20px30px40px;
  

  So, you can have one side of an element rounded while the other side remains sharp.

  For example, let's say you have a card element with a picture inside it. You could apply the following border-radius values:

  .card {
  border-radius: 20px20px00;
  }
  
  .card-picture {
  border-radius: 0020px20px;
  }
  

  Secondly:

  📌 When you have different versions of the same image, consider using the <picture> tag.

  This will help ensure the correct image loads on the user's device, saving bandwidth and boosting performance.

  Example:

  <picture>
      <source media="(min-width: 768px)" srcset="{desktop image path here}">
      <img src="{mobile image path here}" alt="{alternative text here}">
  </picture>
  

  Hope you find this useful!

  Great job overall!

  Marked as helpful

  0

  ---

  

  Bart Feesley•220

  @antimatterhutPosted 4 months ago

  @MahmoodHashem Thanks dude, I had no idea about the picture tag!

  1

  

  Bart Feesley•220

  @antimatterhutPosted 4 months ago

  @MahmoodHashem Thanks dude, I had no idea about the picture tag!

  1