Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Utilizing dual stylesheets with an @media query for screen size

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


This took me a good while to get this done. I learned a lot but still have far to go. Please let me know your thoughts. I am open to input.

Community feedback

@UDsGitHub

Posted

Hi GJCIII, Your site looks great and is responsive on varying screen sizes. One thing you could do though to make it a bit better would be to fix the scale on regular (large screens aka my type of screen, aka 1024 x 720px screens) because I noticed that it was a bit too large for that size. Also, you could add a bit of color change for the buttons to make the users aware that they are hovering over said button or interacting with it, also you have an underline on your "Proceed to Payment" button. Last two things, try to center your card a bit more. I assume it was pretty difficult because you have both the card and your attribution in the same flex container, but you could always remove the attribution from the page or just remove it from the container and give it some margin to stay at the bottom of the screen. Lastly, to improve semantics and avoid accessibility issues, you should replace the div you have with a class of "card" with a main element with the same class. This would improve the HTML structure of your page and help with navigation via external tools. Good luck! 👍

Marked as helpful

0

@GJCIII

Posted

@UDsGitHub Thank you for the feedback, I have made some changes to adddress your suggestions. I wasn't sure about the "semantics" suggestion, so I hope I got that right. I appreciate any feedback.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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