Profile card made using Grid

Community feedback

• 

  Aakash Verma•6,710

  @skyv26Posted almost 3 years ago

  Hi! Buddy, Good work, it is responsive and i really liked it. I saw no issue. Let me clear your doubts and I try my best to give some useful suggestion.

  You can improve your below code.

  <ul>
        <li><span class="followers color-dark">80K</span></li>
        <li><p class="color-light">Followers</p></li>
      </ul>
      <ul>
      <li><span class="likes color-dark">803K<span></li>
      <li><p class="color-light">Likes</p></li>
      </ul>
      <ul>
        <li><span class="photos color-dark">1.4K<span></li>
        <li><p class="color-light">Photos</p></li>
      </ul>
  

  There is absolutely no issue in this code but I would like to say it could be more better in structure. Like

  <ul>
        <li><p>80K</p><span>Followers</span></li>
        <li><p>803K</p><span>Likes</span></li>
        <li><p>1.4K</p><span>Photos</span></li>
  </ul>
  
  

  p is block where span is inline-block you can change block visibility of span by display property and get desired output as it is right now in deployement. So I think in this way you can also short your code too.

  Overall Good !

  Marked as helpful

  1

  ---

  

  Hania B.•1,320

  @techantherePosted almost 3 years ago

  @skyv26 thank you. I also wanted to have this as a single ul but since the focus was just to correct the mistakes in the accessibility report so I adopted this method. But yes, this is a nice suggestion, so I have accommodated the changes in my code, with just two lines addition in css code :) Please check here.

  1