Card NFT responsive using Flexbox and the method Mobile-first

Community feedback

• 

  Fer•3,970

  @fernandolapaz

  Posted about 2 years 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,

  11

  Marked as helpful
• 

  Aimal Khan•2,260

  @Aimal-125

  Posted about 2 years 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 %.

  11

  Marked as helpful