Results Summary Component using CSS Grid

Community feedback

• 

  Zubair Adham•400

  @atmahanaPosted 12 months ago

  Hi there, congrats on starting the journey on this field. For each summary category I would suggest to use flexbox for layouting. Here's how:

  <div class="reaction" 
    style="
            display: flex; 
            justify-content: space-between; 
            align-items: center
     ">
      <div style="display: flex;">
          <img src="URL">
          <p>Reaction</p>  
      </div>
      <div>
          <div class="test-score"> 80 </div>
          <div class="test-percent"> / 100 </div>
      </div>
  </div>
  

  I divide the reaction children into 2 main elements and using display: flex and justify-content: space-between we would get a horizontally align elements with a space in-between. You can learn more about flexbox here.

  Also, the icons is not showing up because you don't have it in the project repository. For typical scenario, we would create a folder called public or assets for storing images of any kind.

  - /root <- project root directory 
     - /assets
         - /images <- store the images here 
     - index.html
  

  Then you can use the image like this:

   <img src="/assets/images/some-icon.svg">
  

  If you have any other questions, feel free to ask. I would be glad to help :)

  0