QR code challenge

Some recommendations regarding your code that could be of interest to you.

• If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body

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

• When you use flexbox in the body, you don't need to use flexbox and margin-top in the main to center the card
• If you use max-width, the card will be responsive

main {
  /* width: 18%; */
  max-width: 300px;
  /* margin-top: 100px; */
}

• In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img

img {
  width: 100%;
  /* height: 250px; */
  /* width: 250px; */
  border-radius: 10px;
}

• Finally, if you follow the steps above, the solution will be responsive.

Hope I am helpful. :)

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have other recommendations regarding your code that I believe will be of great interest to you.

CSS 🎨:

• Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using margin or padding.

• We don't need to use margin and padding to center the component both horizontally & vertically. Because using margin or padding will not dynamical centers our component at all states

• To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚.

• For this demonstration we use css Grid to center the component.

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

• Now remove these styles, after removing you can able to see the changes

main {
  margin: auto;
  margin-top: 100px;
}

• Now your component has been properly centered

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Hey, well done for completed this challenge 😁

I have some suggestions to help you to improve your solution :

• if you want to correctly center your card :
• Give the body a min-height of 100vh
• Add the properties, display: flex; justify-content: center; align-items: center; to make the card center on the vertical axis and horizontal axis
• In order to import a font from google font you can use this line at the top of your css file : @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');
• Then use the property font-family: 'Outfit', sans-serif;
• Your page should have a <h1> tag
• Replace the <h2> tag by the <h1>

CSS :

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
}

I hope you'll find this helpful, and your solution is really good 😄