All comments

• 

  P

  KL• 290

  @TorHamm

  Submitted 5 months ago

  What are you most proud of, and what would you do differently next time?

  Learning how to use background image and start using rem for font

  What challenges did you encounter, and how did you overcome them?

  When it comes to image i don't know how to make it change when get to breakpoint but i discover background image thing so that's it problem solve

  What specific areas of your project would you like help with?

  I don't know why when i deployed my website on GitHub pages the image didn't appear but if i open it locally it appear. If anyone know how to fix please help.

  

  Product preview card component

  2

  40

  

  Jason Konrad• 60

  @AzpenMeadows

  Posted 5 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