Submitted over 2 years ago

2nd Challenge: Order Summary

drunken_neoguri• 290

@DrunkenNeoguri

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

(I wrote this using Google Translate. Please forgive the grammar.)

I did this project as a second challenge!

I studied the use of 'hover' in a previous project, so I was able to work relatively quickly. However, while writing the code, I thought that there might be a way to simplify the code a bit more... but nothing came to mind.

And I tried using 'inherit' to apply the 'width' value of the 'body' tag to the image in mobile size, but it was not applied the same as the 'width' value of the body. T_T)

How should I write it to apply the same?

Also, if you have any other advice, please feel free to tell us! Thank you for watching! :D

Community feedback

Agata Liberska• 3,995

@AgataLiberska

Posted over 2 years ago

Hi @DrunkenNeoguri, my question here is - why do you need to set the body's width at all? I'd leave it alone and allow it to take up the default full width of the screen, and just set a max-width on the card.

Other than this though, nice work on this challenge, it looks very nice, maybe you could try to add the box shadow under the blue button to match the design? It would also be great to see more semantic elements :)

Marked as helpful

drunken_neoguri• 290

@DrunkenNeoguri

Posted over 2 years ago

@AgataLiberska

Thanks for the reply!

I read your reply and applied max-width to the body!

There was no problem on desktop, but when viewed on mobile screen, img tag did not receive max-width applied to body. It was changed by forcibly applying the max-width attribute inside the img tag. T T

Is there a way to express the content with only the body? I want to know!

And, as you said, I confirmed through the example image that the shadow area should be displayed in the button area!

Also, the cards had to show shadow areas! thank you for telling me! :D

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