Design comparison
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
- @AgataLiberskaPosted almost 3 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 helpful2@DrunkenNeoguriPosted almost 3 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
0
Please log in to post a comment
Log in with GitHub
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