Made Order summary card using Vanilla HTML/

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  Replace<section>with the main tag and <div class="attribution"> with the footer tag to make the page accessible. click here for more on web-accessibility and semantic html

  For a responsive content, replace the width in .box with max-width.

  Change the background-size of the body to contain. In the media query you have to change the background-image of the body.

  To center .box on the body using flexbox or grid instead of position: absolute, - USING FLEXBOX: add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body

  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  • USING GRID: add min-height:100vh; display: grid place-items: center to the body

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

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  You forgot to .btn a box-shadow value.

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  0
• 

  Liam Frosteman Neogard•170

  @FrostemanNeogardPosted over 1 year ago

  This looks great! There are just a few small things that could be improved.

  The easiest fix is to add the missing hover effects on the buttons and the "change" text. Secondly would probably be the mobile view. It seems you've set the box's width to 350px and tried to adjust the padding to 38px 22px, though it is retaining the 54px 45px value. This is simply because there is a typo in the media query; it says 38px 22 px rather than 38px 22px. Remove that space and it'll work.

  The final thing would be the background image. The starter files provide you with one image for mobile view, and one for desktop; though it seems only the desktop one is being used here. What you could do is simply change the background image's url of the body in your media query, or what I think is a better solution would be to look into the srcset attribute of the <img> element.

  Hope this helps!

  0