Qr Code Component Challenge using HTML and CSS newbie

Community feedback

• 

  Hassia Issah•50,410

  @Hassiai

  Posted about 2 years ago

  Replace<div class="main">with the main tag and <div class="attribution"> with the footer tag to make the page accessible. click here for more on web-accessibility and semantic html

  There is no need to give the body a width a height value.

  Use the colors that were given in the styleguide.md found in the zip folder you downloaded.

  For a responsive content,

  • Give .main a fixed max-width value and a padding value for all the sides max-width: 320px which is 20rem/em padding:16px which is 1rem/em
  • Give the img a max-width of 100% and a border-radius value, the rest are not needed.

  Give .text a margin value for all the sides and text-align: center. Give p a margin-top or h1 a margin-bottom value for the space between the text.

  To center .main on the page using flexbox or grid instead of margin,

  • USING FLEXBOX: add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body

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

  • USING GRID: add min-height:100vh; display: grid place-items: center to the body

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

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here and here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  10

  Marked as helpful
• 

  WandoCode•840

  @Wandole

  Posted about 2 years ago

  Hey,

  when I am exactly with a window of 1440px, the card is centered. However, as soon as I have a bigger window, it's not centered anymore. Worst: when the window size is under 1440px, your card zoom out...

  To fix that, you should avoid to use fixed width/height. Use min/max-height and min/max-width! It's an important rule in CSS. There are a lot of exceptions of course, but keep that in mind.

  For example, to center your card ( your ".main"), remove the "width" on the "body" tag. As you have set "margin: auto" to the ".main", it will center the ".main". You don't need media queries anymore with that!

  The card itself was quite good!

  Have a good day!

  10

  Marked as helpful
• 

  Fin Tatum•150

  @tdtatum2

  Posted about 2 years ago

  Hey there Daniel!

  I'm still pretty new to all of this, so please take my advice with a grain of salt, but I think I have some pointers that may help!

  • I would look into potentially using flexbox utilities to position your component. I set my body to display: flex; and justified and aligned the contents in the center so that it would always appear centered on any screen size.

  • I think because you have a set body width and height, and it changes with media queries, the component sometimes appears offscreen when changing screen sizes. I simply set my body to height: 100vh (I was advised min-height: 100vh is better) so that the container scaled with the screen size.

  Regardless, I think you did a great job! :)

  11

  Marked as helpful
• 

  Daniel G Szabo•20

  @d-g-Szabo

  Posted about 2 years ago

  Thank you to all of you guys, I tried all the suggested feedback, and all worked very well. In the end, I went with using Grid and commented out the other solutions in my code.

  Thank you for the help again. It was a pleasant surprise seeing so many people helping me :D

  00