Submitted over 1 year ago

Results summary component - responsive layout with grid and flex

Arkadiusz•200

@Arkadiusz-coder

Preview site View code

This is a solution for...Results summary component

HTML
CSS

1newbie

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,250

@hitmorecodePosted over 1 year ago

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

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