Card NFT responsive using Flexbox and the method Mobile-first
Design comparison
Solution retrospective
ENGLISH I would be very grateful for any kind of correction and any advice, I am new in the world of programming. I was able to make this design with guides that I was finding on the internet. I would appreciate your support, thank you.
SPANSIH Agradecería mucho cualquier tipo de correción y cualquier consejo, soy nuevo en el mundo de la programación. A éste diseño lo pude hacer con guías que iba encontrando en internet. Agradecería mucho tu apoyo, gracias.
Community feedback
- @fernandolapazPosted over 1 year ago
Hi 👋🏻, some of this may interest you for future projects:
- Skipping heading levels can be confusing and should be avoided whenever possible (start from <h1>, followed by <h2> and so on).
- The icons are decorative and therefore need an empty
alt
attribute to be ignored by screen readers.
- When there is a hover state over an element it means that it is interactive, so there must be an interactive element around it (like a link or a button). So, the image should be wrapped with
<a>
or<button>
(depending on what happened when clicking on it), and also 'Equilibrium #3429' and 'Jules Wyvern' should be wrapped with the<a>
tag.
- You could also use flexbox to center the content of the page:
body { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }
And removing the
margin
from the 'main-container'.- Think about using relative units since they are better for scalable layouts. Something simple to start with would be to convert to rem (1 rem equals 16px by default), consider this suggestion especially for the
font-size
.
I hope it’s useful : )
Saludos,
Marked as helpful1@rendichiara5Posted over 1 year ago@fernandolapaz wow, so much good information :D, thank you so much for taking the time to analyze and give me these tips!
Thank you very much!
1 - @Aimal-125Posted over 1 year ago
Bro use flex box and don't use absolute units on your main container. Use % units. And horizontal scroll is appearing on my laptop device. To remove x and y scrolls use % units.
Hermano, use la caja flexible y no use unidades absolutas en su contenedor principal. Utilice unidades de porcentaje. Y el desplazamiento horizontal aparece en mi dispositivo portátil. Para eliminar los desplazamientos x e y, use unidades de %.
Marked as helpful1@rendichiara5Posted over 1 year ago@Aimal-125 hey bro, could you write me an example of what you are referring to? thanks for the advice!
0
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