Submitted over 2 years ago

Responsive Order Summary Component using HTML and CSS

C Lewis• 110

@casserole27

Preview site View code

This is a solution for...

Order summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

For the mobile design, should the whole design, including the borders of the component, be inside the mobile viewport when taking the browser controls into consideration? When coding for mobile, is my responsive coding simple enough? This is what took me the most time. Is any of my code too complicated and can be made simpler?

Community feedback

Robert Rynard• 560

@Robert-Rynard

Posted over 2 years ago

Looks really great! Really it's up to you whether you include the whole design in the mobile version. You should be able to just add some margin to the card to help with this. Personally for something like this I prefer to use display: flex; on the body to center the card but the way you used works as well. Great job!

Marked as helpful

C Lewis• 110

@casserole27

Posted over 2 years ago

@Robert-Rynard thank you!! I did try display: flex; but I did not apply it to the body tag. I will try that.

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