Results summary component

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.

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.