Submitted about 1 year ago

Responsive results summary componet using HTML nad CSS

Rose-Kimu•20

@Rose-Kimu

Preview site View code

This is a solution for...Results summary component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

I found it difficultto write optimized code that adheres to the best practices. I also found it challenging to style the mobile view to prevent overflowing of child elements.

Community feedback

Praise Immanuel•250

@PraiseImmanuelPosted about 1 year ago

Hello Rose U+1F60A, Great job your did here. I would like to suggest your add this to your button css:

.summary-btn button{
    background: hsl(224, 30%, 27%);
    color: white;
    width: 100%;
    border-radius: 35px;
    height: 3.5rem;
    /* margin:15px 0 0 0 ; */
    font-family: 'Hanken Grotesk', sans-serif;
}

.summary-btn button{
    background: hsl(224, 30%, 27%);
    color: white;
    width: 100%;    
    border: transparent;
    border-radius: 35px;
    height: 3.5rem;
    /* margin:15px 0 0 0 ; */
    font-family: 'Hanken Grotesk', sans-serif;
}

This will help take off the default border and make the button match the UI design better.

Marked as helpful

Rose-Kimu•20
@Rose-KimuPosted about 1 year ago
Thank you so much for reviewing my code and providing feedback. I will make sure to update my code.
0

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord