Nft card preview - Flexbox and :hover

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello @DvD83130 ,

  I have some suggestions regarding your solution:

  • Using landmark elements , you can improve the navigation experience on your site for users of assistive technology . So you can use<main> to wrap the body content

  • Links must have discernible text . you can have the main image Equilibrium in the html .

  • For any decorative images, each img tag should have empty alt="" andaria-hidden="true"attributes to make all web assistive technologies such as screen reader ignore those images as in alt="icon-ethereum" , alt="icon-ethereum" Read about how and when to write image alt text and what it's for..

  • It's invalid html to wrap a heading element in an anchor tag. Swap those around so the anchor is inside the heading.

  • Do not include a prefix such as "profil-author-pictures" the screen reader will communicate the fact that this element is an image as it has been coded as such. You can useJules Wyvernas alt text .

  • You can use flexbox properties and min-height to the body( not height )to center the component on the middle of the page.(no need for position absolute)

  {
  display: flex;
  align-items: center;
  justify-content : center ;
  width: 100%;
  min-height: 100vh
  }
  

  • Never have font size in px. Using px won't allow the user to control the font size based on their needs.

  • Use max-width instead of width. Then a little margin on the component or padding on the body to stop it hitting screen edges

  Hopefully this feedback helps.

  Marked as helpful

  0
• 

  David Casanova 💫•180

  @DavidCasanova83Posted over 2 years ago

  Duuude !!! thanks a lot for your comment ;) I Love it, many goods suggestions. You improve my knowledge, just perfect.

  1