Results summary component

Community feedback

• 

  Leroy-sama•300

  @Leroy-samaPosted over 1 year ago

  Hello Elisabeth, your design looks good except for some small things. The reaction, memory, verbal and visual sections could use some adjustments. Make the icons a little bit smaller and try using display: flex and align-items: center to make the content centered in those sections. The width of the summary sections should be the same as that of the buttons.

  Marked as helpful

  0
• 

  Refer59•190

  @Refer59Posted over 1 year ago

  Hi 🖐, seems that you have a responsive design issue, the current solution only fits to the desktop requirement, there are many things to improve. I recommend you to:

  • I recommend you to start making the layout from Mobile to Desktop

  • Do a css reset and set body and html 100% height:

  *{
  margin: 0;
  padding: 0;
  }
  
  body,html {
  height: 100%
  }
  

  • Set to your div .container.

  .container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: inherit; /* equivalent to 100% */
  }
  

  this container will acts like your "page" container, and will automatically center your component to any screen sizes.

  • Avoid using absolute units like px in the children elements of the .container element, instead use %, vw or rem, em, % will let you have a fluid responsive layout. this relaive units reduce the amout of work you have to do saving you from using media queries

  • You can add a different background-color to each element container like div, ul, form, ... see how each element fits to the layout, this will let you see what is going

  • Use browser developer tools to change individual element styles in real time, once you get a result you like, you can copy and paste the applied styles to your actual css file.

  Marked as helpful

  0