Order Summary (improved it!! :D)

Community feedback

• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted over 2 years ago

  Hello,

  Your image isn't loading because there isn't an image to load :))) There's only an html and a css file in your repo.

  Your html markup seems pretty good btw! Just one thing to mention: <br> and <b> shouldn't be used for styling, they both have some semantic meaning. Just use css for stlying!

  The "Change" text should be a link by the way, not a paragraph!

  I'm not going to comment on the styles just yet, as there's some work left to do on it, from what i see ^^

  Marked as helpful

  1

  ---

  

  Khadija Hashmi•200

  @khadijahashmi2Posted over 2 years ago

  @FluffyKas hii, thankyou so much for the feedback! :D 😅😅whoops I redid my solution annd as im writing this i realized i forgot a few things (sorry, ive been kind of scatterbrained lately) , about taking out the <b> tag completely. (I'll change it) though mostly i instead changed the font-weight in css. I would really appreciate if you drop a few comment on my styling :D (I'll change the stuff i forgot to as well, so no need to mention them again)

  1

  

  P

  Fluffy Kas•7,715

  @FluffyKasPosted over 2 years ago

  @khadijahashmi2

  Whoa, well done, it looks a lot better! Now some actual helpful advice too ^^:

  1. Wrap everything in a main element if you'd like to get rid of the issues in the report.

  2. Your using a \ instead of / for the image src, I'd change this (although it strangely seems to work anyway, it's just not very correct).

  3. To center your component, it's not great practice using position: absolute. Grid or flexbox can do the same, in a more efficient way. You could just add this to the body:

  display: grid;
  place-items: center;
  min-height: 100vh;
  

  4. To make your container more responsive, you could use max-width instead of width. To make the image itself resize responsively too, add the following snippet to it:

  display: block
  max-width: 100%;
  height: auto;
  

  5. You're using height on the Cancel order button, but adding some padding-top and bottom would be a better choice.

  6. If you'd like smoother hover states, you could look into transitions, they're really easy to implement.

  Marked as helpful

  1

  

  Khadija Hashmi•200

  @khadijahashmi2Posted over 2 years ago

  @FluffyKas feels good to get a compliment ●ˇ∀ˇ●, i updated my solution, the advice is very helpful :)

  0