All comments

• 

  nikhil149•50

  @nikhil149Submitted over 2 years ago

  Can some one help in fix any issues

  

  Product preview page using html and css

  2

  50
  

  Joseph Cobbinah Ofori•60

  @joecobbPosted over 2 years ago

  @nikhil149 That's a great first attempt! I just want to make few suggestions which will make your solution even better.

  1. You can add the following css to your to properly center your product-container. It will place the product-container right in the middle of the body.

  body{ justify-content: center; height: 100vh; }

  2. Usually all fonts and colors, et cetera used in the design are all in the style-guide.md file. If you view the file, you will realize that two fonts are used.

  • Family: Montserrat

  • Weights: 500, 700

  • Family: Fraunces

  • Weights: 700

  All the fonts can be found at fonts.google.com. For convenience sake I will put a link here which you include in the head of you document. It has all the two fonts.

  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],700&family=Montserrat:ital,wght@0,500;1,700&display=swap" rel="stylesheet">

  Use font-family: 'Fraunces', serif; for the bold title as well as the price. and Montserrat for all others.

  Marked as helpful

  0
• 

  alfiekadalfie•50

  @alfiekadalfieSubmitted over 2 years ago

  any recommendations for centering anything smack middle of the page?

  

  QR Code Component using Flexbox

  2

  20
  

  Joseph Cobbinah Ofori•60

  @joecobbPosted over 2 years ago

  Hello Alfiekadalfie, Hope you are good. You need to apply the following css to your parent div.

  <div class="flex-container"> <div id="the-content"> </div> </div>

  .flex-container{ display: flex; height: 100vh; justify-content: center; align-items: center; }

  Marked as helpful

  0