The style guide for this challenge mentioned a mobile and desktop width (mobile: 375px, desktop: 1440px) but I didn't really know what to do with this information. The mobile and desktop design looked the same so I ended up simply designing the card based on the mobile width. What would be a better way to use this information to create a responsive design?
I also struggled to center the card in the middle of the screen. After some googling I ended up using
body {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
but this seems like a band-aid solution. Is there a better way to vertically align elements on the page?
@danielmrz-dev
Posted
Hello @xirb22!
Your project looks great!
Using position can be good for projects with just one centered element. But there's a better and more simple way to do it:
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
I hope it helps!
Other than that, great job!
And Happy New Year 😊
Marked as helpful
@MelvinAguilar
Posted
Hello there 👋. Good job on completing the challenge !
"mobile: 375px, desktop: 1440px" are just references to the dimensions from which the screenshots are taken; don't confuse them with breakpoints.
As mentioned, the solution using flexbox has been suggested, and I'll emphasize that using position: absolute on these elements is not a good idea, as it distorts the component on small screens
I hope you find it useful! 😄
Happy coding!
Marked as helpful
@joshmichael23
Posted
You can use the widths as reference when inspecting the element and changing the width according to the design. That way you can see if your project matches the it. :)
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
