Design comparison
Solution retrospective
I had issues with the purple line underneath the image. As I added the purple overlay, and the purple line appeared. Feel free to take a look at my code, you will notice there is no margin or padding getting in the way so I am really at a loss as to what is causing that issue. Thanks!
Community feedback
- @ApplePieGiraffePosted almost 2 years ago
Hey, Amanda Buttineau! 👋
Nice effort on this challenge! 👏
You should be able to get rid of that purple line beneath the image in the desktop view by setting the
display
property of the image toblock
instead ofinline-block
. 😉Besides that, I'd like to suggest using more padding in your layouts to add space around elements. For example, you can add padding to inside of
.main-content
and avoid having to add so much margin around the individual elements that are its children. That way, you can set the spacing around those elements in one place and it will be easier to make your layouts look clean and consistent.I'd also like to suggest adding some more descriptive
alt
text to the desktop and mobile images so that users will understand what those images are for. If you don't think those images are important to the content of the page, then you can leave theiralt
text empty and screen readers will skip over those images and ignore them. 😉Hope you find these tips helpful. 😊
Keep coding (and happy coding, too)! 😁
Marked as helpful0@ab1820Posted almost 2 years ago@ApplePieGiraffe thanks so much I will give that a try!! :)
1
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