Product preview card component

Community feedback

• Account deleted

  Hi

  For your image you should have used the <picture> element. It takes multiple images and allows you to decide which one to use depending on the conditions you set such as screen size. The background-image property is meant to be used for images that are just decorative and have nothing to do with the content.

  Remove the <h3> as it is not necessary for the button text.

  happy coding.

  Marked as helpful

  1

  ---

  

  SachithKarunathilake•140

  @SachithKarunathilakePosted over 1 year ago

  @madzi-hove Thanks! It was helpful. I should try them next time.

  0
• 

  Elevate•240

  @i7ectorPosted over 1 year ago

  Good work @SachithKarunathilake!

  regarding your question above, the way you did works as there is many ways to achieve the same result when it comes to coding.

  things to consider...

  display: none;

  • removes the element from the page view
  • code for the hidden element is still present
  • element itself will not be displayed
  • will not take up any space

  .example-element {
    display: none;
  }
  

  visibility: hidden;

  • removes the element from the page view
  • element will still take up space on the page

  .example-element {
    visibility: hidden;
  }
  

  hope this helps! good luck and happy coding :)

  Marked as helpful

  1

  ---

  

  SachithKarunathilake•140

  @SachithKarunathilakePosted over 1 year ago

  @i7ector Thanks! It was helpful.

  1

  

  Elevate•240

  @i7ectorPosted over 1 year ago

  @SachithKarunathilake no problem glad you found it useful :)

  1