Design comparison
Solution retrospective
NEED HELP TO UNDERSTAND THIS ISSUE:
I'm using the Flex-Direction: Column-Reverse to place the image on top when breaking the layout into mobile width. But I don't understand why it is breaking the template.
Anyone could help me, explaining the issue?
Community feedback
- @correlucasPosted over 2 years ago
๐พHello Daniel, congratulations for your solution!
I've inspected your code and the error with the component image is due its padding, if you increase the padding you see that the image starts to grow, you've imported the image using
background-image
right? See the code below where I've changed the padding and the image grows..cover-image { padding: 220px 64px; }
My advice for your is that you import the image using <img> or <picture>, see that picture is a better fit because you can wrap both mobile and desktop image inside of it, doing that you avoid these
background-image
behaviors and improve the semantics too.Look that the blendmode for this challenge
multiply
have a better fit than theoverlay
one you've used formix-blend-mode
.Hope it helps and happy coding!
0
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