Product preview card component

Community feedback

• 

  Jason Konrad•60

  @AzpenMeadowsPosted 7 months ago

  Hello,

  I like your solution. Regarding changing image based on breakpoint, I would recommend using the html <picture></picture> element. This allows to you set multiple image sources, and it will load the appropriate one based on screen declared width.

  Regarding your background image not showing when hosted on GitHub pages, the url uses a file path starting at the root directory (i.e. / = root). GitHub seems to handle where root is differently (I am not entirely sure how this works). You can try using a path relative to your css file instead. A quick edit in dev tools got your site working fine for me. See below:

  
  /* your path */
  .image {
      background-image: url("/images/image-product-desktop.jpg");
  }
  
  /* working path */
  .image {
      background-image: url("../images/image-product-desktop.jpg");
  }
  

  I hope this is helpful!

  Marked as helpful

  1
• 

  P

  luccyyy97•140

  @luccyyy97Posted 7 months ago

  nice work. not really sure why but maybe can try if remove the "/" infront to see if it works.

  background-image: url('/images/image-product-mobile.jpg');

  to

  background-image: url('images/image-product-mobile.jpg');

  Marked as helpful

  1