Basic HTML and CSS

Community feedback

• 

  Randy Ochoa•40

  @SoyRandy708Posted about 2 years ago

  Agrega un max-width en lugar de solo width, para que en pantallas menores del 320px tambien quede centrada la informacion y no se haga un scroll horizontal

  1

  ---

  

  Paul-Andre Henegar•20

  @Paul-AndrePosted about 2 years ago

  @SoyRandy708 Hi. Thanks for the suggestion. I tried using max-width instead of width, but I couldn't figure out how to make it work with the vertical centering trick I'm using.

  I didn't realize I could use width and max-width simultaneously. I'll try that.

  I would really like to know the solution to horizontal and vertical centering + max-width (without using media queries or more modern css features like flexbox)

  0

  

  Randy Ochoa•40

  @SoyRandy708Posted about 2 years ago

  @Paul-Andre Pues lo mejor para alinearlo vertical y horizontalmente al mismo tiempo y para que el contenido quede siempre en el centro seria Flex la verdad por que hay otras maneras como poner en la tarjeta padre

  margin:0 auto
  

  Pero eso solo seria horizontalmente y ya para hacerlo verticalmente seria algo mas complejo y dependeria de cosas como el tamaño de la pantalla asi que no se veria completamente bien y lo mejor seria Flexbox

  0
• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

  Hi @Paul-Andre 👋, good job on completing this challenge, and welcome to the Frontend Mentor Community! 🎉

  I have some suggestions you might consider to improve your code:

  • Use the <main> tag to wrap all the main content in your solution rather than <div class="card">.
  • Use <footer> instead of <div class="attribution">. The <footer> element contains authorship information.
  • Instead of using pixels in font size, use relative units of measure like rem or em. The font size in absolute length units (px) does not allow users with limited vision to change the text size in some browsers. Reference.
  • Add descriptive text to the alt attribute of the QR image. The text must clearly describe the image. The alt attribute enables screen readers to read the information about on-page images and will be displayed instead if an image file cannot load.

  I hope those tips will help you! 👍

  Good job, and happy coding! 😁

  1