Design comparison
Solution retrospective
I had some challenges in aligning the header background image
Community feedback
- @d8701aPosted about 1 year ago
Just try to center the text in your sections, especially headings. You can achieve this by setting the whole section to display: flex or you can try to center it with margins or translate method, it's up to you.
Also try to use picture instead of img elements for the cherry and orange pictures. Using the <picture> element is great because you can use images of different dimensions depending on the screen size. In your case, I think you used the image intended for a mobile version for your desktop version as well. For example, if you compare the mobile version of the orange picture, you see it has more height than the one made for desktop, that one is shorter.
The rest of your project looks good, keep up the good work!
Marked as helpful1
Please log in to post a comment
Log in with GitHubJoin 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