QR Code component using basic HTML and CSS

Community feedback

• 

  Aaron Varga•370

  @avinno

  Posted over 1 year ago

  Hey! Great job on your solution here!

  In regard to your question and some suggestions I have for you for this solution:

  • I would try not to specify height on containers or major bodies of content so that you can let the content naturally flow down the page as needed. With regard to your solution code, I am specifically talking about your div.qr-card. For the div.qr-card I would not set a "min-height".
  • I would not set your footer position to fixed. I think you are doing this to keep it at the bottom at all times, but you can achieve this a different way to avoid other issues like the footer overlapping your content on smaller screens such as with displaying flex and using the flex-grow property, etc. I challenge you to look into that if you are interested.
  • I see you have set widths for certain elements as well. While this may be necessary in special cases, I would recommend not doing this where you have done it and let widths be a natural 100% and use padding and margins to achieve any space you may need. Using exact heights and widths are not inherently responsive, so using units like percentages, flex, and grid will allow your content to naturally grow in height and width as needed with respect to window size/device size.

  In direct response to your question:

  In summary, I would suggest ONLY setting exact heights or widths if it is absolutely necessary for something specific, for example, an icon or image that does not need to take up a full width or height, but overall large areas of content you can likely let naturally fill the page with restricting it to any specific height or width unless it is a percentage like 100% or if you have a two column flexbox, you may set each to 50%, etc. Of course, these are my personal opinions, but at all costs, I let my page content flow naturally until I have an absolute need to specifically size something (again, such as an icon or image, etc.). This makes for a more responsive page. If you start setting exact heights and widths for elements all over your page, when you resize your window or look at it on a small device, you are going to have overflow problems and it will become a mess.

  I hope that helps! Great job on this project! I look forward to seeing more of your solutions and maybe updates to this one if you wish to make them!

  10