Order Summary Card with Semantic HTML and CSS Flexbox

Community feedback

• 

  Heli0s•670

  @zeerobitPosted almost 3 years ago

  Good work completing this challenge.. to get the exact sizing you need the pro subscription in order to get the sketch and figma files otherwise you can install a browser plugin called PerfectPixel which can help you with the sizes. While looking at your solution i noticed a couple of things:

  • To correctly center your card, remove top: 4rem; margin: auto; from the container then on the body selector add min-height: 100vh; display: grid; place-content: center; you will need to adjust the background image as well
  • no need to put a height on your container, let the content dictates the height
  • the hero image should be a background image and not added in the html
  • images should have max-width: 100%; instead of width also add display: block
  • your "payment-button" and "cancel-order" classes should be wrapped in anchor tag and not button
  • You should add a css reset to prevent any weird browser behaviors, i use this css reset
  • the card is too big for devices lower than 400px, you should add a media query

  Hope you find these feedback helpful, Happy coding !!!

  Marked as helpful

  2

  ---

  

  Meghan Bissonnette•30

  @meghanleiaPosted over 2 years ago

  Thank you @zeerobit! This is all very helpful. I'm incorporating this feedback into my next project and it's already helping.

  0
• Account deleted

  You can use a Chrome extension : PerfectPixel and load the design preview image above your current design.

  Marked as helpful

  1

  ---

  

  Meghan Bissonnette•30

  @meghanleiaPosted over 2 years ago

  Thanks @Syde2 I'll try this with my next project.

  0
• 

  Dev Rathore•2,600

  @GitHub-dev12345Posted almost 3 years ago

  Congratulation Nice Work Keep it up 😉👍

  Used this code want your card in center position :

  in body tag Used this CSS Code: body{ display : flex; justify-content: center; align-item: center; }

  in Card Design CSS Code used this property: align-self: center;

  used this CSS Property in your card to increase and decrease the size of card:

  1.In Card design CSS Code Used this:

  transform : scale(0.8); this property decrease the size of card. 😉

  large size for increase the number of scale & small size for decrease the number of scale

  This code very helpful for you 😊😉 check it, then click on marked as helpful

  Marked as helpful

  1

  ---

  

  Meghan Bissonnette•30

  @meghanleiaPosted over 2 years ago

  @GitHub-dev12345 thanks for the code suggestions! Very helpful indeed.

  0

  

  Dev Rathore•2,600

  @GitHub-dev12345Posted over 2 years ago

  @meghanleia Can You Follow me on twitter and github, in twitter can you contact with me for the Front end Mentor 😊😊.

  0
• 

  Travolgi 🍕•31,400

  @denieldenPosted almost 3 years ago

  Hi Meghan, I took some time to look at your solution and you did a great job!

  Also I have some tips for improving your code:

  • remove margin and top properties from container class
  • use flexbox to the body for center the card. Read here -> best flex guide
  • after add min-heigth: 100vh to body because Flexbox aligns to the size of the parent container
  • try to add a little transition on the element with hover effect
  • For fix the dimention of top image in the background just put to the body background-size: contain;

  Overall you did well :)

  Hope this help and happy coding!

  Marked as helpful

  1

  ---

  

  Meghan Bissonnette•30

  @meghanleiaPosted over 2 years ago

  @denielden - I appreciate the feedback, thanks so much!

  1
• 

  optimusprime202•1,200

  @optimusprime202Posted almost 3 years ago

  Hey @meghanleia, I knew you could do it.

  1