Responsive website start with mobile first

Community feedback

• 

  Rebecca Padgett•1,840

  @bccpadgePosted over 1 year ago

  Hello @TKNsss. Welcome to Frontend Mentor Community!!🎉

  To answer your question, you can center your qr code component using Flexbox or CSS Grid

  Flexbox

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

  CSS Grid

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

  HTML 📃:

  • Every website should have at least one landmark like a <main> tag so you can wrap all your content in a <main> tag

  • Ids are best used in JavaScript

  • IDs vs Class CSS

  HEADING TAGS

  • Every website should have one heading like a <h1>
  • You add the this code: <h1>Improve your front-end skills by building projects </h1>

  Here is my solution to this challenge qr code component

  Hopes this helps you and don't hesitate to reach out to me if you have any questions

  Marked as helpful

  1

  ---

  

  Kim•30

  @TKNsssPosted over 1 year ago

  @bccpadge Thank you so much for helping me with this problem! If you don't mind, can I have your contact to exchange some useful information related to frontend stuff?

  0

  

  Rebecca Padgett•1,840

  @bccpadgePosted over 1 year ago

  @TKNsss

  You can connect with me through my GitHub account @bccpadge or you can send me an email [email protected]

  0
• 

  Dawid "makaroni" Markieton•140

  @greenMakaroniPosted over 1 year ago

  If you want to center elements in a div, set that div to flex and then give it justify-content: center; align-items: center;

  Say that you want to render element in the middle of your screen, then just make sure your div has the width and the height of the entire screen e.g. giving width: 100vw; and height: 100vh; and make sure to margin-0, as sometimes default margins can mess with your layout.

  Here are references I'd recommend to go through. align-items -> https://developer.mozilla.org/en-US/docs/Web/CSS/align-items justify-content -> https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

  if you're confused about what is vh and vw -> https://www.w3schools.com/cssref/css_units.php

  good job and have fun learning :>

  Marked as helpful

  0

  ---

  

  Kim•30

  @TKNsssPosted over 1 year ago

  @greenMakaroni I've tried and it worked so well. Thanks for your advice!

  0