A Simple QR Code Project using only HTML and CSS

Community feedback

• 

  Mahmoud-AbdelKarim•600

  @Mahmoud-Abdelkarim777Posted 3 months ago

  • i saw your coding it needs some improve.
  • remove margin: auto; margin-top: 200px; from main
  • add to the body this { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; }

  Marked as helpful

  0
• 

  P

  Boris•3,970

  @makogeborisPosted 3 months ago

  Great job completing your first challenge, here is how you can better place the QR code in the center.

  • To properly center the card, using flexbox on the body is better suited than margins, add this on your body and remove the all the margin properties from the main and also remove all the br tags

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2rem;
  min-height: 100dvh;
  

  • Avoid setting fixed heights and widths on elements, as this can create problems with responsiveness and content fit. Instead, let the content and padding determine the element’s size. If necessary, use max-width or min-height, and prefer relative units like rem for better adaptability. Change the width of the main to max-width and it should be defined in rem. Also, remove the height property completely
  • Media queries are not required for this challenge as the styles remain consistent across all screen sizes. You can remove them.
  • Font-size should be written in rem not px
  • Use a separate file for your CSS as it improves maintainability.
  • Wrap a footer tag around the .attribution
  • Consider using a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset. This will help reset a list of default browser styles.

  Hope this helps, Good luck!

  Marked as helpful

  0