QR code component

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!

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

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! 😊