QR code component using basic HTML, CSS

Community feedback

• 

  Mazen Hassan•600

  @Mazz100Posted 12 months ago

  Hello, your work looks great good job, as for your question about fixed width I had exactly the same approach on my end, I used margins and width with pixels but this was bad practice so I will write down what I learned from this solution:

  HTML

  • You can remove the class used for main element as it describes itself and can be used directly inside of CSS.
  • I read that linking the font or any outsourced content inside HTML and you can do that by copying the google-font link provided for the font and then use it in CSS.

  CSS

  • You need to use max-width and define a rem number instead of fixed width.
  • Remove all the margins as its also not ideal to measure distance.
  • Change the grid type to column display and remove place content replace it with justify-content, align-item

  I see more hard coded numbers and also absolute position is very bad in this first solution so if you don't want the footer showing up just use display:none.

  Feel free to checkout the discord community it helped me a lot. Good luck :)

  Marked as helpful

  2

  ---

  

  kwokkw•80

  @kwokkwPosted 12 months ago

  Hi @Mazz100,

  Thanks for your reply! I could not figure out the a better approach on the width and height so I use hard coded numbers. I definitely need more development on this.

  Great advice on the display of my footer! Thank you!

  0
• 

  P

  Øystein Håberg•10,390

  @Islandstone89Posted 12 months ago

  Hi. You're using a <main>, which many beginners tend to forget/be unaware of. And you have descriptive alt text. Well done. Here are some tips to make your solution better:

  HTML:

  • The text in the <footer> needs to be wrapped in a <p>.

  CSS:

  • It's common to use lowercase letters on Custom Properties.

  • You can keep the place-content: center,. Even though many use Flexbox to center the card, it's also possible to do it using Grid, and it's actually 1 line less of code. However, height on the body should be min-height.

  • Font-size should never be in px. Instead, use rem.

  • Remove the fixed width on the card. You rarely want to set fixed dimensions, except for sometimes on icons. Do add a max-width in rem to prevent it from getting too big on larger screens.

  • <img> should have max-width: 100% instead of width.

  • Change the margin on the image to margin: 0 auto;.

  • Add some padding on the .container to get the space between the image and the edge of the card.

  • Put text-align: center; on the body. Then, all the text will inherit that value from their ancestor(body).

  • Remove the position: absolute; on the footer. If you don't want that text to show, remove it from the HTML altogether.

  • Remove the media query. In this challenge, there is no need for one.

  Good luck!

  Marked as helpful

  0

  ---

  

  kwokkw•80

  @kwokkwPosted 12 months ago

  Hello @Islandstone89,

  Thanks for your great advice. I made couple changes accordingly. Below are the questions came up while marking the changes.

  1. I added a max-width on the card. But how to determine how many rem should be used to prevent it getting too big?
  2. With the max-width: 100% on the <img>, the image becomes relatively small to the design. How should I solve this problem.

  Thank you for any input! Any related information/resources will be appreciated!

  1

  

  P

  Øystein Håberg•10,390

  @Islandstone89Posted 12 months ago

  If you open DevTools (press F12), you can toggle the "device toolbar" at the top, and select "responsive". Then adjust the viewport and see what works best. I think I used 20rem.

  Regarding the image...actually, I want to correct myself a bit. Don't have any margin on the image at all. To center the image, use Flexbox on the .container:

  display: flex;
  flex-direction: column;
  align-items: center;
  

  0

  

  kwokkw•80

  @kwokkwPosted 12 months ago

  Hi @Islandstone89,

  Thanks for your advice again. I figured out why my image was relatively smaller. I put down a smaller width attribute in the img element in the HTML file. Lesson learned. Thanks a lot!

  1