Responsive card using flexbox and grid.

Community feedback

• 

  Éric Férole•420

  @Eric-FerolePosted almost 3 years ago

  Hi Felipe,

  Great job overall. Here's my two cents :

  • You could put a display: block; on your img tag to remove the small gap at the bottom when overing on it
  • You could add à cursor: pointer; to your div.hover-img-icon

  I hope this comment helps you.

  Keep up !

  Marked as helpful

  1

  ---

  

  Felipe Miranda Marreiros•160

  @felipe-miranda-marreirosPosted almost 3 years ago

  @Eric-Ferole thanks for the tips. The display: block worked perfectly!

  1
• 

  Aakash Verma•6,710

  @skyv26Posted almost 3 years ago

  Hi! Felipe, Really nice job. I checked your design and its responsiveness. I found no issues in your work excepts the report issues. In order to solve report issues do as below:

  1. Add alt text as I saw in your report

  <div class="main-img-box">
            <img src="./images/image-equilibrium.jpg" alt="" class="main-img-equilibrium">
            <div class="hover-img-icon">
              <img src="./images/icon-view.svg" alt="More info icon">
            </div>
          </div>
  

  as you can see above main-img-equillibrium image have no alt text. Add alt to solve issue.

  2. Wrap your section code inside the <main> tag and it will solve all your accessibility issues.

  I hope it might helpful to you.

  Best Wishes

  1

  ---

  

  Felipe Miranda Marreiros•160

  @felipe-miranda-marreirosPosted almost 3 years ago

  @skyv26 Thanks for the tips. I'll fix them.

  0