Qr Code Component Challenge using HTML and CSS newbie

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year 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

  Marked as helpful

  1
• 

  WandoCode•840

  @WandolePosted over 1 year 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!

  Marked as helpful

  1
• 

  Fin Tatum•150

  @tdtatum2Posted over 1 year 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! :)

  Marked as helpful

  1

  ---

  

  Ryan Stehle•210

  @ryan17stehlePosted over 1 year ago

  @tdtatum2 to piggyback on what you're saying about the centering, I find that using grid helps to center vertically and horizontally quite easily.

  I do something like this for these card components: body { display: grid; place-items: center; min-height: 100vh; }

  .container { /* Use given width/height here if provided */ width: 375px; height: 500px; }

  this will center your container on the page.

  Marked as helpful

  1
• 

  Daniel G Szabo•20

  @d-g-SzaboPosted over 1 year 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

  0