Responsive Result Summary using Bootstrap

Community feedback

• 

  P

  beowulf1958•1,450

  @beowulf1958Posted about 1 year ago

  Your question shows you are on the right track. Best practice is to keep the styles DRY (don't repeat yourself.) You can give a group of elements a general class and then add a second utility class to differentiate them. You do this by declaring 'general' (space) 'utility' in the class attribute.

                <div class="item">
                  <p class="stat reaction"><img src="images/icon-reaction.svg" alt="reaction">Reaction<span>80/100</span></p>
                  <p class="stat memory"><img src="images/icon-memory.svg" alt="memory">Memory<span>92/100</span></p>
                  <p class="stat verbal"><img src="images/icon-verbal.svg" alt="reaction">Verbal<span class="more">61/100</span></p>
                  <p class="stat visual"><img src="images/icon-visual.svg" alt="visual">Visual<span class="more">72/100</span></p>
                </div>
  

  Then in the css

  .item p {
      font-size: 1.25rem;
  }
  
  .stat {
      border-radius: 10px;
      margin: 10px;
      padding: 10px;
  }
  .reaction {
      background-color: hsl(0, 46%, 95%);
      color: hsl(0, 100%, 67%);
  }
  
  .memory {
      background-color: hsl(34, 64%, 94%);
      color: hsl(39, 100%, 56%);
  }
  
  .verbal {
      background-color: hsl(168, 71%, 93%);
      color: hsl(166, 100%, 37%);
  }
  
  .visual {
      background-color: rgb(243, 238, 255);
      color: hsla(256, 72%, 46%, 1);
  }
  

  This will save you some typing and keep your CSS clean and readable.

  BTW, I noticed you use h5 for styling and not for structure. This is not a good practice. Use a <p> tag and make it the size you want. (see above)

  Great job on the challenge and keep on coding!

  Marked as helpful

  0
• 

  Mikail Ghali Imam•200

  @ImammikaPosted about 1 year ago

  Thanks for the help, i will try it out

  0