Responsive result summary component

Community feedback

• 

  Nuria Torres•110

  @nuria1110

  Posted almost 2 years ago

  Hi! Looks like a great start, just a few suggestions:

  • If you want to use a mobile-first approach, meaning you start writing your CSS for smaller screens first, your selectors do not need to be within a media query. You can write your base formatting as you did with the body selector and then as you increase your screen size, change your property values, same goes as for the rest of your selectors, e.g.:

  body {
    font-size: 12px; 
  }
  
  @media (min-width: 750px) {
   body {
    font-size: 14px; 
   }
  }
  
  @media (min-width: 1440px) {
   body {
    font-size: 16px; 
   }
  }
  

  This can also be the other way around, you can write your initial formatting for bigger screens and then as your screen size gets smaller use media queries to change your values.

  • If there are values you know you will be using more than once, you can create variables in your root CSS to avoid having to repeat yourself or make it easier to use them. I mostly use this if I have a number of specific colours I know I'm going to need:

  ::root {
    --light-lavender-color: hsl(242, 15%, 65%);
  }
  
  .container {
    background-color: var(--light-lavender-color);
  }
  

  • If your border radius around your card is the same, e.g. 30px, you can just use border-radius: 30px; instead of repeating yourself:

    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
  

  I hope this helps! I have also completed this challenge so feel free to have a look :)

  11

  Marked as helpful