QR-code component via HTML&CSS

Community feedback

• 

  Luis Aviles•180

  @lavil014Posted about 1 year ago

  Well done on completing your challenge.

  Hope my feedback is helpful for you.

  On your HTML file , make sure to add descriptive alt to give more accessibility to your website . Ex: alt= "QR code to frontend mentor website".

  Use flex box instead of margin to make your website resposive.

  Replace this style :

  .container { margin: 0 auto; width: 270px; padding-top: 150px; }

  for the following:

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

  Make sure you use responsive units such : % , rem , em.

  Hope this feedback helps and welcome to this long journey.

  Marked as helpful

  0
• 

  Aaron Varga•370

  @avinnoPosted about 1 year ago

  Hello! Great job on this challenge!

  I see you are requesting feedback on your CSS positioning.

  Your "margin: 0 auto" nicely sets your component center horizontally, but it does not solve your vertical alignment/positioning. There are multiple ways to achieve a vertical and horizontal center alignment, but below is one way I would suggest to tackle this.

  Some suggestions I have are:

  • You don't actually need your div.container. It is an unnecessary additional element you can achieve everything you need without your content nested inside that.
  • If you remove your div.container and set your div.wrapper to "max-width: 270px" instead of "width: 270px", which is not completely necessary, but I do like the practice of using max-width to allow your content to close up further if necessary even though this component is already small, there are very few if any devices today that are going to be as small as 270px wide, I still like to use it over width because I try not to set things to fixed widths or heights to allow content to flow, but this is not a major necessary change, personal preference.
  • I'd give your body CSS properties of: "display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 2rem); [calc with your 100 vertical height minus 2rem offsets the padding added for a true 100vh] and padding: 1rem; just for some space around your component in case the window becomes small and close to the component's edges, I think this is a nice and clean way to position it perfectly center both horizontally and vertically.

  I hope this helps!

  Let me know if you need any further info on what I suggested or anything else otherwise!

  Happy coding!

  Marked as helpful

  0