Results summary component main (Solution)

Hello there 👋. Good job on completing the challenge!

I have some suggestions about your code that might interest you.

HTML:

• You could replace the .text and .numbs paragraphs with <span> tags. This could be more semantic because is not a paragraph per se.
• Try not to use the <main> tag as a component, use it as a container that will wrap the component in question.

CSS:

• Try not set a fixed width, use max-width instead (style.scss line 10). If you want to limit set a minimum width you could do that also.
• Let the content define the height of the .your-result element, you could use padding and margins for the children to achieve this. And of course, the .your-result padding is a must.

Hello Luciano! Excellent job coding this design.

Looking at your code I just notice that you are repeating code in the media queries, for summary and your-result classes, and it is not necessary, mediaqueries allow you to keep your current styles and you can just overwrite or add the ones that you need.

.summary{
        display: flex;
        align-items: center;
        flex-direction: column;
        box-shadow: 11px 16px 20px -12px #00000026;
        border-radius: 15px;

@media (min-width: 768px)
main .summary {
            display: flex;
            align-items: center;
            flex-direction: column;
            box-shadow: 11px 16px 20px -12px #00000026;
            border-radius: 15px;
            margin: unset;
            padding: 0 10px;
            width: 300px;
}

//you can just in the mediaquerie add the styles you need 
@media (min-width: 768px) main .summary {
            margin: unset;
            padding: 0 10px;
            width: 300px;
}

Also In the main element you added a flex-direction: row, you can skip this step since row is the default value for flex-direction, you can just set display=flex and it will be automatically be set it to row.

 main{
        display: flex;
     /*   flex-direction: row;  */ this one can be skiped since is the default.
        width: 600px;
        margin: unset;
        padding: 10px;

All of this is in order to reduce code, because less code is easier to read and maintain overtime.

I hope you can find this useful and happy learning :)