Submitted over 2 years ago

Component using CSS Grid and custom properties

Ayoub Ahabchane• 290

@ayouchane

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Order summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

This is my first time looking at a component and trying to code it 🥳 I appreciate any and all feedback on how I could make my implementations more efficient and resilient. Love you all <3

Community feedback

Ramon Pereira• 250

@RamonAPereira

Posted over 2 years ago

It's great for desktop! but you should reduce the size of the component, so that it fits on mobile devices without scrolling. this can be done with media query(https://www.w3schools.com/css/css_rwd_mediaqueries.asp).

Ayoub Ahabchane• 290

@ayouchane

Posted over 2 years ago

@RamonAPereira You have no idea how insightful this has been. Thanks a bunch 🙏🏼 I didn't resort to media queries but boy oh boy did I spend hours tinkering with code in the Mozilla inspector. This headache that I'm left with now shall teach me the importance of always starting mobile first.

Lucas Miller• 70

@Lucas171

Posted over 2 years ago

Hey! Great Job on this! From my perspective it looks perfect! The only thing I would recommend adding are the hover and active states, which are shown in the design folder in the downloaded files. Once you do this your site will feel more interactive!

Ayoub Ahabchane• 290

@ayouchane

Posted over 2 years ago

@Lucas171 Hey 👋🏼! Thanks for taking the time to look around! I had to keep switching between the images repeatedly to spot the changes. At first, I thought they were referring to the pointer cursors (which change by default so you can imagine my confusion). Thank you so much 🙏🏼 I went ahead and added the hover effects. It should be live now.

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