Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Results summary component - responsive layout with grid and flex

Arkadiusz 200

@Arkadiusz-coder

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I have a little problem with my button responsiveness. With padding I set it's size for mobile and desktop separately and issues emerges in the middle. The button is too small when the screen is between the smallest size for this challenge - 375px and the breaking point - 450px. I fixed this setting padding in % instead of px. Is there any other good option to make button responsive?

I also wonder why projects on my screenshot is visibly smaller than that from original. I tried to make it relatively big to much the original. Does someone knew why it is like this? Is it only a matter of size of components on my project or something else?

Community feedback

hitmorecode 6,230

@hitmorecode

Posted

Congratulations well done.

body
{
font-family: 'Hanken Grotesk', sans-serif;
font-size: 18px;
margin: 0;
padding: 0;

/* add these four lines. this will place the card in the middle of the page */ 
min-height: 100vh; 
display: flex;
justify-content: center;
align-items: center;
}

button
{
font-size: 1rem;
background-color: hsl(249, 16%, 26%);
color: var(--white);
margin: 0 auto;
padding: 15px 185px; /* change this. this is not the best way to do it, but it will work for now. if you give the button a fixed width you will not have this problem. Avoid using % for padding */
border-radius: 100px; 
border: none;
}

/* change the breakpoint to 650px */
media (min-width: 650px){

.body
{
background-color: var(--white);

}


Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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