Responsive Order Summary Page

Solution retrospective
Super fun little project to make and add to the portfolio -- only thing I probably struggled with is ensuring the card stays in the viewport so there isn't scrolling especially when it's at desktop level (currently working on).
As of this post I recently updated some final touches so it could be a minute before the changes show up.
Feedback is always welcomed!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @andreasremdt
Hey @naomidzunic,
Congrats on finishing this challenge, it looks really good! A couple of suggestions:
- As the accessibility report already says, you could use a
main
element for your container instead of adiv
. This ensures that your markup is even more semantic and can be better understood by search engines and screen readers. - The "Change" button inside the plan box is a
p
element, which doesn't really seem to fit here. I think the design means this to be a link or button the user can click on to change the annual plan. So, either ana
or abutton
would be more suitable. If you are using a button, make sure to give it acursor: pointer
, so that the user's mouse additionally indicates that this element is clickable. Right now, it might be confusing for some users. - Your card is nicely centered on the page, but you get scrollbars real soon as you mentioned already. @BenjaDotMin made a great suggestion, I'd go with that one to easily fix it :)
Marked as helpful - As the accessibility report already says, you could use a
- @BenjaDotMin
Hello Naomi! Apologies if I read this wrong, but we can very easily center your card, and remove the scrolling.
On your .container tag, remove: margin: 25% auto 25% auto; (also the media query margin at 510). On your body tag add: display: grid; place-items: center; height: 100vh;
And that should center things up nicely :) Great work, you have made the card itself very clean.
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