@didicowSubmitted 9 months ago
To a first quiz was so nice, i liked, the guide, read me and other stuff there it was a big help to find mylselft with my mind. thanks for it! lets for more...
TITOR
@hectorestebanmAll comments
- @hectorestebanmPosted 9 months ago
Buenas, tu repositorio github con tu código indica que tu proyecto esta vacío , puede que por eso no se visualice bien tu página, igual no se llega a ver el código QR, revisa por las dudas la ruta de donde tengas esa carpeta con la imagen.
0 - @CreightonEliSubmitted 9 months ago@hectorestebanmPosted 9 months ago
Buenas, buen diseño, te quedo parecido al desafío, un consejo para mejorar el tema de la imagen, es que agregues en la etiqueta img la siguiente línea: width: 100%. De esa forma cuando achiques la pantalla la imagen se acomodará al tamaño máximo de tu tarjeta, así como lo tenés la imagen se desborda de la tarjeta para pantallas más pequeñas. Espero te sirva, saludos.
Marked as helpful1 - @NordanirSubmitted 9 months ago@hectorestebanmPosted 9 months ago
Hola, bienvenido y felicitaciones por completar tu primer desafío. Algo para mejorar es que note que el texto de tu tarjeta sobresale. Esto lo podrías mejorar eliminando de tu clase panel, la línea height: 60%, de esta forma el height de tu tarjeta se acomoda al tamaño de tu contenido, si quisieras agregar más contenido, el alto también aumentaría, de esta forma te evitarías tener que definir el height por cada componente nuevo que agregues, lo haría automáticamente. Espero te sirva este tips, a seguir trabajando.
Marked as helpful1 - @paupalazzesiSubmitted 9 months ago@hectorestebanmPosted 9 months ago
Hola Paula, como estás? Estaba viendo tu página y note que te quedo con unos márgenes muy grandes, igual para el tamaño de las fuentes. Prácticamente tu tarjeta ocupa toda la pantalla, no se si era tu idea hacerlo así, salvo que no se te hayan cargado bien todos los archivos SASS.
Otra cosa que note es que tuve que bajarle el zoom del 100% al 75% a mi pantalla, y recién ahí la página quedo como en el desafío. Como prueba intenta ver la página en otra pantalla distinta para que veas si te hace lo mismo. Quería comentarte esto nomás, el resto esta perfecto. Saludos.
0 - @MiyaoCatSubmitted 9 months ago
Not much to this one...if you seen anything that can be improved let me know! Is my CSS efficient? Could I refactor it to so it's less code?
@hectorestebanmPosted 9 months agoHola, una cosa que podrías mejorar es modificar la línea de tus margenes en el button. Debería quedarte así: margin: 32px 0.
De esa forma agregas solo margin 32px arriba y bajo, y margin 0 izquierda y derecha, de esa forma te quedaría más parecido al modelo del desafio.
Espero te sirva, saludos.
0 - @maria-monteirosSubmitted 9 months ago@hectorestebanmPosted 9 months ago
Hola que tal, el diseño te quedo bien, pero para pantallas de escritorio las columnas y botones quedan muy pegados, por lo menos en mi navegador. Podrías aumentar un poco el tamaño del container e ir haciendo pruebas
También podrías usar display grid en vez de usar display flex, y dividirlo en tres columnas, de modo que el ancho total de tu container se divida automáticamente en 3 partes iguales,
Espero te sirvan los tips.
0 - @Garf228Submitted 9 months ago
How do I align the UL elements?
How do I center the number text in each LI?
Why is the star.svg not rendering? It worked on Live Server.
@hectorestebanmPosted 9 months agoHola que tal, estaba viendo tu código y note algo, que tenes dos veces la imagen icon-star.svg. Una dentro de tu raiz principal y la otra dentro de la carpeta images. Deberias eliminar la duplicada
Te recomiendo que pruebes asi: <img src="images/icon-star.svg" class="star" alt="star"> Puede que la barra / antes de images no te la este tomando como referencia al archivo.
Podes alinear los elementos li con display flex, para que te queden centrados.
Espero te sirvan estas observaciones, a seguir adelante.
Marked as helpful0 - @StevenGermanSubmitted about 2 years ago@hectorestebanmPosted about 2 years ago
Buenas @StevenGerman. Buen diseño. Lo único que te faltaría es cambiar el color de los encabezados y párrafos a color blanco. Un tip que te puede servir para futuros proyectos, dentro de tu clase ".button" agrega la siguiente línea: cursor: pointer; De esa forma tu cursor cuando pases el mouse por el botón cambiará de flecha a puntero. Espero te sirvan estos consejos, saludos
0 - @sdonohue0918Submitted about 2 years ago
For 300px and lower viewport width, left margin of qr card is more compressed then right margin. Is this an issue because of the default margin and padding on the <body> tag?
Is there a simpler way to ensure the card is centered regardless of viewport width without fiddling with rems or percentage units on the card, qr code image, and the card margins?
@hectorestebanmPosted about 2 years agoBuenas @ sdonohue0918. Tengo unos consejos para darte:
Dentro del body agrega las siguientes líneas body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } De esa forma centrarás tu card tanto horizontal cómo verticalmente automáticamente.
Dentro de la clase ".card" yo eliminaría el height, y deja que la altura de tu card la determinen tus elementos a medida que los vas agregando, así no te quedarán tantos márgenes en blanco.
Espero te sirvan estos tics, felicidades por completar el desafío.
0 - @HubertSzymanski5Submitted about 2 years ago
This was quite straightforward project. However I'm not sure if there's a better way to position 'Learn More' button. When shrinking at some point text was hiding under the button. I solved it with switching to mobile view, but I wonder if it can be done better?
Another issue I've found just now is that footer behaves weird when view port width is shrunk to less than 300px: it hides on the right side. No idea why it happens.
Thanks for checking out my solution! Any feedback is welcome!
Have a nice day and happy coding!
@hectorestebanmPosted about 2 years agoBuenas @ HubertSzymanski5 Estuve viendo tu código y podrías probar lo siguiente para que se vea mejor. Dentro de tu body agrega los siguientes códigos: body { flex-direction: column; align-items; min-height: 100vh; }
Con esto todos tus elementos se ubicarán uno encima de otro en forma vertical y estarán centrados en el medio de la pantalla, tanto para la parte móvil cómo para desktop.
Otro consejo, deberías quitar el position: fixed del footer, ya que sino tapará parte de tu diseño. Espero te sirvan estos consejos.
0 - @zp021Submitted about 2 years ago
Even though the challenge was fairly straight forward, it took me some time trying to get it as close as possible, especially the text. I tried to open the design photos in photoshop and get the sizes that way. If this is cheating, let me know, but I figured in real work situations you would work off designer's files anyway. I usually try building a challenge a few times after completing it, or building it differently in some way, therefore, as always, any feedback is much appreciated. As I'm still learning, I'm somewhat hesitant to comment on other peoples solutions so I don't give someone bad advice, but very much appreciate these challenges and the community, and will work on that going forward. Thanks!
@hectorestebanmPosted about 2 years agoBuenas @ zp021, no es mala la idea de usar Photoshop para obtener las dimensiones aproximadas de la tarjeta QR, otra opción mas simple sería usar el programa Paint de Windows para ir viendo las dimensiones y el espaciado aproximado de los textos. Pero ambos resultados son aceptables. Con respecto al diseño no lo veo mal y has tratado de hacerlo lo más parecido posible. Felicidades.
0 - @EAgard-34Submitted about 2 years ago
Any feedback is welcome, thanks in advance.
@hectorestebanmPosted about 2 years agoBuenas @EAgard-34, estoy viendo tu diseño y veo que no te cargan las imágenes. Dentro de tu código <picture> las llamas a través de una carpeta llamada /images, pero en tu repositorio no tienes una carpeta llamada /images. Cómo solución crea una carpeta con ese nombre y guarda allí tus archivos de imagen.
Otro consejo es que elimines los márgenes de tu card, o por lo menos no asignes márgenes tan grandes. Espero te sirvan estos consejos, por el resto lo hiciste bien.
0
