Responsive Card-QR-View

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  ¡Hola! 👋. ¡Buen trabajo al completar el desafío! Tengo algunas sugerencias sobre su código que podrían interesarle.

  • El atributo alt debería explicar el propósito de la imagen. Al escanear el código QR, el usuario será redirigido al sitio web frontendmentor.io, por lo que un mejor atributo alt sería qr code to frontendmentor.io.

  Si desea obtener más información sobre el atributo alt, puede leer este artículo. 📘.

  • Establecer el ancho del componente con un porcentaje o una unidad de vw se comportará de manera extraña en dispositivos móviles o pantallas grandes. Debe usar un max-width de 320px o 20rem para asegurarse de que el componente tendrá un ancho máximo de 320px en cualquier dispositivo, también elimine la propiedad width con un valor porcentual.

  • ¿Por qué has utilizado etiquetas en español? <enlace rel="preconectar" href="https://fonts.googleapis.com">.

  Espero que te sea útil! 😄 Por encima de todo, ¡la solución que has presentado es genial!

  Saludos

  Marked as helpful

  0

  ---

  

  Ower•60

  @OwerAndresPosted almost 2 years ago

  Hola @MelvinAguilar gracias por tus sugerencias las tendré en cuenta, por otro lado el vh no lo uso casi o simplemente no lo uso por qué no lo sé usar 😅

  Y del porque la etiqueta en español, no lo sé se supone que la había puesto en inglés

  1

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  @OwerAndres Disculpe, me equivoqué al escribir VH, era VW que significa viewport-width, Algunas personas utilizan esas unidades para el ancho del componente. Usted ha usado width: 30%; lo que hace que su componente se estreche mucho en dispositivos móviles y se agrande demasiado en pantallas grandes. Puede ver esta foto de cómo se ve su solución en un dispositivo móvil: screencapture-card-view-qr-netlify-app

  0

  

  Ower•60

  @OwerAndresPosted almost 2 years ago

  @MelvinAguilar vaya, pero no debería verse haci, aunque puede que se vea haci por qué el Mobil es de menos píxeles, ya que lo tengo con un min-widht 375px, no entiendo entonces porque se ve haci. Lo acabo de ver desde mi móvil y se ve bien

  0

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  @OwerAndres Ahhhhh, ha usado @media only screen and (min-width: 375px) and (max-width: 499px) por eso en su celular no se distorsiona, el mio es mas pequeño, aun así, debería considerar el ancho mínimo en 320px para que no se distorsione en ningún dispositivo.

  El 320px es un estándar segun las WCAG (Web Content Accessibility Guidelines): Referencia

  0

  

  Ower•60

  @OwerAndresPosted almost 2 years ago

  @MelvinAguilar Ohhh vale, lo tendré en cuenta de ahora en adelante para que abarque dispositivos más pequeños.

  Muchas gracias por sus consejos me ayudan bastante

  1
• 

  Sandro•1,150

  @sandro21-glitchPosted almost 2 years ago

  Hi Ower

  Here are some suggestions for your code

  Use semantic HTML tags: Instead of using div tags, you can use appropriate semantic HTML tags like header, section, and footer for the different sections of your code.

  Consider using a CSS reset to ensure that all browsers display the elements in a consistent way.

  Use rem units for font-sizes instead of px, so that your text resizes proportionally with the user's browser font-size setting.

  Use class names that are more descriptive, for example, instead of "general", you can name it "card-container".

  Use CSS shorthands for multiple properties with the same value, for example, instead of "margin-top: 5%; margin-bottom: 15%", you can use "margin: 5% 0 15%".

  Happy Coding

  Marked as helpful

  0

  ---

  

  Ower•60

  @OwerAndresPosted almost 2 years ago

  Hola @sandro21-glitch muchas gracias por tus consejos los tendré en cuenta para poder mejorar como desarrollador

  0