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

Order summary card

hitmorecodeβ€’ 6,270

@hitmorecode

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


I was struggling placing the background svg image on the page. The solution was very simple, change background-size from cover to contain. It took me awhile because I've never used background-size: contain, didn't even knew it existed.

Community feedback

Aram Nayebbandiβ€’ 510

@devaramnye

Posted

I recommend to work on your accessibility. I am working as well hard to understand it right as it would be a huge gap learning it correctly. I do not know if you always work with div's as I only review this project but HTML5 allowes us to easily organize our HTML with landmarks. I like your project and the matching design with the original part. I love your work and its just a little reminder that I focuse by myself and want to give it to you as well for your future works.

Marked as helpful

0

hitmorecodeβ€’ 6,270

@hitmorecode

Posted

@devaramnye Yes this is something that I'm working on it. It's just that bad habits are hard to die. Thanks for pointing that out πŸ‘πŸ˜

0
Ferβ€’ 3,990

@fernandolapaz

Posted

Hi πŸ‘‹, just a few things that may interest you:

  • It is better to use min-height: 100vh; as using height causes the page to be cut off in viewports with small height (such as mobile landscape orientation).
  • You might consider using relative units like rem or em since they are better for scalable layouts. Something simple to start with would be to convert to rem (1 rem equals the font size of the root element, 16px by default). Consider this suggestion especially for the font-size.
  • It might be good to get used to designing with the mobile first approach, which means designing for mobile first and then for desktop or any other device, as it is widely considered best practice.

Please let me know if you want more info on any of these topics or disagree with something. I hope it’s useful : )

Nice solution btw.

Regards,

0

hitmorecodeβ€’ 6,270

@hitmorecode

Posted

@fernandolapaz Thanks for the tips. I'm trying to get more used to using rem's and em's, but I find myself most of the times falling back to px's.

Desktop first, this is the bad habit I caught from following tutorials. I have to break out of this bad habit :-)

Thank you for the feedback

0
Ferβ€’ 3,990

@fernandolapaz

Posted

@hitmorecode

You are welcome πŸ™‚

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