Responsive product-preview-card

Community feedback

• 

  Philip Korb•170

  @PhilipKorbPosted over 2 years ago

  I saw your code on github and your path to resources are not matching.

  in your project case: • main folder • index.html • styles.css • images folder

  that means you have to respect the path of each resource.

  your code:

  <link rel="stylesheet" href="/styles.css"> <img src="/images/image-product-mobile.jpg" alt="" class="chanel">

  in both resources you have a slash starting, which are interrupting the path.

  Try this:

  <link rel="stylesheet" href="styles.css"> <img src="images/image-product-mobile.jpg" alt="" class="chanel">

  Marked as helpful

  0
• 

  Paweł Bojemski•170

  @Spirit-Posted over 2 years ago

  The mistake with not working CSS is using wrong path used in link element.

  Path for CSS you provided is absolute /styles.css. The slash (/) at the begining of the path means "go to the root directory and follow with path" and will produce path example.com/styles.css.

  Because you are using GitHub pages to deploy you must remember that your page will be in subdirectory. You can skip the starting slash and leave just styles.css - the path generated will be example.com/deployed-repository/styles.css.

  I loaded your file correctly by my side and I can tell you are going to need the same for images.

  Anyways, congratulations on your solution!

  It looks nice in mobile version, however there is no desktop one?

  Marked as helpful

  0
• 

  Lucas 👾•104,400

  @correlucasPosted over 2 years ago

  Hello Baran, congratulations for your solution!

  Your CSS sheet is not working online because you did not declare the file path.

  Note that local you don't need to put../ to indicate the folder location, but online yes.

  Só remember ./ dot slash for the same folder and .. / for a sub folder.

  See the correct import below

    <link rel="stylesheet" href=". /styles.css">

  Hope it helps, happy coding

  0