Order-Summary with simple HTML and CSS

Community feedback

• 

  Aakash Verma•6,710

  @skyv26Posted almost 3 years ago

  Hi! Jociel, I checked your work and I found some issues and they are as following:

  1. Your images links are not correct, Ofcourse images were visible while you was working on your system (It's your thought) but as you deployed it... Booom! Images link broken

  Reason When we work on VSCODE or any editor then editor somehow detect the image using relative path. But Github Pages needs correct relative path, for Github you must have to provide appropriate path and according to github suggestion just prepend (.) period in your image path.

  Solution Just do one thing in your code image path, that you have supplied as below:

  <img src="/images/illustration-hero.svg" alt="Music Hero">
  <img src="/images/icon-music.svg" alt="Song Note">
  
  

  change above with below code.

  <img src="./images/illustration-hero.svg" alt="Music Hero">
  <img src="./images/icon-music.svg" alt="Song Note">
  

  and your images will successfully visible just after commit and push.

  2. Your Change button is not aligned with Annual Plan, do one thing add flex property to your ul and also add align-items: center; property it will solve your alignment issue.

  3. Your mobile is not responsive or Your responsive design is not looking good below 414px. Your card is going outside the viewport . Please use width with relative units like %age to control your card overflow issue.

  Suggestion Make habbit to use (.) in your image path at beginning. Make your design fully responsive. Always stick with requirements.

  I hope you understand above issue and fix it sooner.

  Good Luck

  Marked as helpful

  0

  ---

  

  Jociel•90

  @jsmeyringPosted almost 3 years ago

  Aakash Verma (@skyv26 )

  I made the changes and my code was better and working correctly.

  Thank you very much for the tips.

  1

  

  Aakash Verma•6,710

  @skyv26Posted almost 3 years ago

  @jsmeyring Your always welcome Jociel. Best of luck for next challenge!

  0
• 

  MordenWebDev•500

  @MordenWebDevPosted almost 3 years ago

  image will show in live server but when u access the site without the live server the image will not load. to fix this issue remove "/" from the starting of image source. your code: <img src="/images/illustration-hero.svg" alt="Music Hero">

  use this where "/" is not in starting of source.

  <img src="images/illustration-hero.svg" alt="Music Hero">

  Marked as helpful

  0