Design comparison
Community feedback
- @its-subhashPosted 10 months ago
Hey @paupalazzesi , your solution looks pretty good but I just came across two major problems i would like to address, and I have some advice to how to correct those with least amount of efforts.
1.Fixed Footer : Footer or say attribution is fixed at one place so while scrolling of even normally it comes above card, this problem can be fixed by completely removing
.attribution{}
class and addingflex-direction:column
andgap:2rem
inside body selector.2.Scroll Bar: It's not that of a big deal and can be ignored but in my opinion there should not be need of a scroll bar for just a card. And the best solution for it is quite headache to do when you came this far, so the easiest way I can do it is you can put
margin-top:16vh
insted ofmargin:20vh
in.card
class, this will add margin to the top only and it'll be centered.Additionally I saw lots of margins and paddings on elements which isn't that good thing, so you can explore it's better alternative, like explore flex and grid little more.
Rest of the code was really good, I hope you'll find this helpful.
Marked as helpful0@paupalazzesiPosted 10 months ago@its-subhash Thanks! I find your comments really helpful. I hope I could correct this bugs soon.
0 - @BlackpachamamePosted 10 months ago
¡Saludos Maria Paula! has hecho un buen trabajo 😃
📌 Te dejo algunas sugerencias
- Para mejorar la semántica de tu HTML, podes cambiar tu
<div class="card">
por<main class="card">
y<div class="attribution">
por<footer class="attribution">
- Podes usar
display: block
en tuimg
para quitar el espacio en blanco por debajo de la imagen. Aunque en este caso es visualmente irrelevante, pero puede ayudarte a calcular mejor los espacios entre un elemento y otro - El texto
Learning
no es unbutton
si no mas bien podría ser un enlacea
, ya que, al darle click te llevaría a otra página. Los botones se usan para funcionalidades como enviar un formulario o cambiar el tema del sitio - Los encabezados
h1
,h2
, etc, deben ir en orden del mayor al menor. En este caso tuh2
podría ser tranquilamente unp
- Como dijo el compañero en el otro comentario, no recomendaría usar
position: fixed
para estefooter
, si lo notas, en algunas pantallas llega a superponerse con la card y es algo molesto. En su lugar, podes seguir la recomendación que te dejaron de usarflex-direction: column
en elbody
, para que se vea correctamente tenes que quitar elposition: fixed
delfooter
y losmargin
en elcard
y dejar tubody
de la siguiente manera:
body { background: var(--yellow); display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 2rem; /* Esto genera un espacio entre el main y el footer */ min-height: 100vh; margin: 0; /* Esto quita los márgenes que vienen por defecto en los navegadores en el body, podrías aplicarlo directamente como parte del reset en tu selector universal (*) */ }
Espero que estas sugerencias te ayuden a mejorar 🤓
0@paupalazzesiPosted 10 months ago@Blackpachamame Gracias por tus aportes y la buena onda! Realmente me sirven muchísimo para seguir aprendiendo. 🫡 Saludos!
0 - Para mejorar la semántica de tu HTML, podes cambiar tu
Please log in to post a comment
Log in with GitHubJoin 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