Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Basic HTML and CSS

@Paul-Andre

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What's the font size for the bottom text? The Figma design file says 15px. However, when I use 15px in my implementation, it ends up slightly smaller than the jpg files, and when I use 16px it ends up slightly bigger.

Community feedback

@SoyRandy708

Posted

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

Posted

@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

@SoyRandy708

Posted

@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

@MelvinAguilar

Posted

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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord