QR code component

Community feedback

• 

  P

  Johnny Gérard•880

  @johnnygerard

  Posted over 1 year ago

  Hello Oyesina,

  If you read the challenge page, you will see that it has only one layout. To build a responsive layout, you need to start another challenge.

  I can already tell you that @media CSS rule is the main way to make a website responsive.

  Good luck with your projects!

  11

  Marked as helpful
• 

  Rebecca Padgett•2,100

  @bccpadge

  Posted over 1 year ago

  Hello @oyesina-paul. Welcome to Frontend Mentor Community!!!🎉

  Here are few tips you might be interested in to improve your solution.

  HTML 📃:

  • Wrap all your content using a main tag
  • Attribution should be wrapped in a footer tag
  • The image should have alt text: <img src="images/image-qr-code.png" alt="qr code to frontendmentor.io"> for screen readers

  HEADING TAGS

  • <h1> is the most important tag on a website and <h6> is least important on the page
  • The title on this page is <h1>Improve your front-end skills by building projects</h1>

  CSS 🎨:

  • Font size shouldn't be in pixels because pixels don't scale when users want to change their font size in their preferred browser.
  • Best practice to remove default styles using the CSS Reset below
    • A (more) Modern CSS Reset
    • CSS Reset

  To center your component in the middle of the page you can use Flexbox or CSS Grid

  Flexbox

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

  CSS Grid

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

  • You can add the font-family on the body and everything within the body will inherit the font-family
  • On your .container add max-widthso your component will be responsive without media queries For the image, you can put max-width:100%; and display:block; for default styling
  • Use these styles and your attribution better position on your website

  .attribution {
    font-size: 0.688rem;
    text-align: center;
   /* position: relative;*/
   /* top: 10px;*/
    position: fixed;
    inset: auto auto 1em 1em;
  

  Inset property is a shorthand for top, right, bottom, left

  Here is my solution to this challenge - Qr code component

  I hope you find this useful and don't hesitate to reach out if you have any questions

  01

  Marked as helpful
• 

  Flávia Reis•690

  @flaviare1s

  Posted over 1 year ago

  Hello Oyesina! I recommend that you study the concepts of Media Query and Mobile First.

  To make responsive websites it is interesting to learn Flexbox and Grid.

  Congratulations on your project! 😊

  01