Design comparison
Solution retrospective
need help and recommendation
Community feedback
- @HassiaiPosted over 1 year ago
To center .cards on the page using flexbox, replace the height in the main with min-height: 100vh.
For a responsive content .give .cards a fixed max-width value and there is no need to give it a height and min-height value. Give .card a padding value for all the sides.
in the media query reduce the max-width value.
Give the body a background-color
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
Marked as helpful1@Enis67Posted over 1 year ago@Hassiai
but when I remove height: 500px its going to be, maybe its because I have position: absolute for the button?
what value should I give for max-width? and what value in media query?
0 - @GeorgeBryzhPosted over 1 year ago
I'd like to share you that remarks
- You must delete
height: 500px
for desktop, the card should change a height
- You don't need to set a
position: absolute
for you button
- You must set on the
.btn-click
text-align: center
, to center a text inside a button
- You must to set a
border-width
on thepx
to make that rounded
Happy strides on that road)
0@Enis67Posted over 1 year ago@GeorgeBryzh
.btn-click{ color: hsl(179, 100%, 13%); background-color: #fff; text-decoration: none; padding: 8px 32px; border-radius: 135px; text-align: center;
}
how can i get the button on the position like I had with absolute? Its right under my paragraph.
0 - You must delete
- @shashikantdev3Posted over 1 year ago
Hello there 👋. Good job on completing the challenge! Here are some suggestions regarding your code that may interest you.
Your solution looks great for the desktop screen, I would recommend a few changes in CSS for your button so that it will look perfectly round and also consider repositioning the button.
See below the CSS code for the desktop screen...
.btn-click { border-radius: 135px; top: 75% /* Or maybe 80% */ }
For the mobile screen, I would recommend a few changes in the media query see the below code.
CSS @media (max-width: 480px) { main{ /* height: 100vh; */ } .card { /* width: 100%; */ /* height: 100%; */ padding: 5rem; } .btn-click { left: 38%; top: 94%; } }
I hope you find my comment useful, 😄 Nevertheless, the solution you submitted is great! 🎉 Happy coding
0
Please log in to post a comment
Log in with GitHubJoin 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