Product-preview-card-component-solution

Community feedback

• 

  Pietrell•400

  @PiotrPlotastPosted over 1 year ago

  Hi, here's some advice from me:

  • In your project if you have images uploaded and want them to display properly in your GitHub page, the source of the image should start with ./ and not with / -> <img src="./images/image-product-desktop.jpg" alt="" class="desktop">.
  • If your image changes depending on the screen size you should use picture html element.
  • You should do mobile-first approach for your web pages(it's easier trust me).
  • Font size shouldn't be in px units, instead search for em and rem units.
  • Read about Semantic HTML

  Marked as helpful

  1

  ---

  

  Mandlakazi Nxumalo•550

  @NxumaloDevPosted over 1 year ago

  @Pietrelll Thank you. I just used px units because of the style guide provided. I'll start using the relative units on my following projects

  1
• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  Hello there 👋. Good job on completing the challenge !

  • It seems like the issue with your deployment on GitHub Pages is related to the image path in your code.

    To fix this, you should add a dot (.) before the slash (/) in the image source URL. This is because in HTML, a path that starts with a slash (/) is treated as an absolute path, meaning it starts from the root of the domain. However, when you use GitHub Pages, the root of your domain is different, so the image path needs to be adjusted.

    Here's the corrected code:

    <img src="./images/image-product-desktop.jpg" alt="" class="desktop">
    

  I hope you find it useful! 😄

  Happy coding!

  Marked as helpful

  1

  ---

  

  Mandlakazi Nxumalo•550

  @NxumaloDevPosted over 1 year ago

  @MelvinAguilar Thank you. On my first challenge ( QR Code ), it worked without adding the dot...or is it perhaps it automatically insert it?

  1

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  @NxumaloDev The reason your image source worked without adding the dot (.) before the image (qr code) path is that it is using a relative path by default.

  Relative Paths:

  A relative path is relative to the current location (the location of the file where the path is being used).

  • image-product-desktop.jpg <- your QR image looks like this.
  • images/image-product-desktop.jpg
  • ./images/image-product-desktop.jpg

  Absolute Paths:

  An absolute path is defined as the specific location of a file or folder from the root directory, this could also be a full URL

  • /images/image-product-desktop.jpg <- Previously, this was the path for this challenge, which caused an issue.

  • https://example.com/images/image-product-desktop.jp

  1
• 

  Mandlakazi Nxumalo•550

  @NxumaloDevPosted over 1 year ago

  Update: It now works on GitHub Pages! Not sure when it will reflect on my Design comparison

  2