Responsive Order page using CSS HTML

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  Hi Vinay, great work on this challenge! 😉

  Here are a few tips for improve your code:

  • for fix the top image in the background just put more specific background properties to the body like this:

  background: url("../img/pattern-background-desktop.svg") no-repeat top center;
  background-size: contain;
  background-color: #e0e8ff;
  

  • use main tag for wrap the card and improve the Accessibility and not for inside card content
  • remove all unnecessary code, the less you write the better as well as being clearer: for example the header container of image or the <br> (is for break line of text not to separate the elements)
  • use h1 tag for Order Summary the title of card
  • remove all margin from .container class
  • use flexbox to the body to center the card. Read here -> best flex guide
  • after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
  • add a little transition on the element with hover effect
  • instead of using px try to use relative units of measurement -> read here

  Overall you did well 😁

  Hope this help and happy coding!

  Marked as helpful

  0

  ---

  

  vinay kandoi•120

  @vinaximusPosted over 2 years ago

  @denielden Firstly thanks for useful tips :). I have a few questions here -If I remove the header, then How will I align the text in the header to Center? -Instead of <br>, should I use <p> for both lines?

  1

  

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  @vinaximus You are welcome! You can add a class with text-align: center and instead of <br> use dispay: block so the element will fill the entire line as if it were a block

  1

  

  vinay kandoi•120

  @vinaximusPosted over 2 years ago

  @denielden Thanks for the advice

  1