@MelvinAguilar
Posted
¡Hola! 👋. ¡Buen trabajo al completar el desafío! Tengo algunas sugerencias sobre su código que podrían interesarle.
- El atributo
altdeberí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 atributoaltseríaqr 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
320pxo20rempara asegurarse de que el componente tendrá un ancho máximo de320pxen cualquier dispositivo, también elimine la propiedadwidthcon 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
@OwerAndres
Posted
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
@MelvinAguilar
Posted
@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
@OwerAndres
Posted
@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
@MelvinAguilar
Posted
@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
@OwerAndres
Posted
@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
