QR Code Using Bootstrap

Community feedback

• 

  hitmorecode•6,680

  @hitmorecodePosted over 1 year ago

  Congratulations well done. Just a few thing for you to fix your page. I think is best for you to restructure your markup first. To make things easier for yourself eliminate all the unnecessary div's and with that you have too many classes. You can do this challenge with two to three div's.

  • You are using h5 for the card title, change that to h1
  • You gave the body an id of body, you don't have to do this. There's only one body on a page so the body doesn't need an id or class.
  • Vertical align is not working because you need to add a height to the body.

  body {
  min-height: 100vh;
  background-color: hsl(212, 45%, 89%);
  display: flex;
  padding: 5%; ### try to avoid this when necessary. if not using correctly, this will break your page. Use fixed padding instead. 
  justify-content: center; 
  align-items: center; 
  text-align: center;
  font-family: Outfit, sans-serif; ### it's best practice to add the font-family in the body, this will apply to the entire page. If there's need for a different font-family elsewhere only add it there where's necessary. 
  }
  

  Right if you go from desk to mobile, your card gets smaller and the other way around it gets wider. To fix this add a fixed width and height to the card. You can use these values;

  • Card width = 320px, height = 500px
  • For the image you can either use an img tag or a div and add the image as a background with CSS. For the image window you can use width = 288, height = 288px.

  Another thing that you can do, is to add a small CSS reset. This will remove all padding's and margin's from the page.

  ### it's best to add this at the top of your CSS
  * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }
  ``
  I hope this will help you to fix your page. If something is not clear or you have more questions, feel free to ask
  

  Marked as helpful

  0

  ---

  

  Frank Buono•20

  @fbuonojrPosted over 1 year ago

  @hitmorecode thank you so much for the reply and helpful tips!

  0
• 

  Timothy Fawcett•250

  @timbosToursPosted over 1 year ago

  You can try adding min-height: 100vh; to the body

  0
• 

  Timothy Fawcett•250

  @timbosToursPosted over 1 year ago

  Hello friend,

  To centre the card you can use

  body { display: flex; justify-content: center; align-items: center; text-align: center; }

  To control the size of the card you can use combinations of min-height or max-height, min-width or max-width.

  And to make it look a little nicer you can curve the edges with border-radius and add a box-shadow for some visual depth. You can also the move the attribution section to the bottom of the page with something like;

  .attribution { position: fixed; bottom: 0; display: none; }

  Hope that helps :)

  0

  ---

  

  Frank Buono•20

  @fbuonojrPosted over 1 year ago

  @timbosTours Thank you for the reply. The tips to to round the edges and add a shadow definitely made it look much nicer! I am still struggling with the vertical centering but I will keep playing around with it.

  0