Design comparison
SolutionDesign
Solution retrospective
I am unable to put the image above text for mobile screen please help me to fix this issue. "Thank you"
Community feedback
- @correlucasPosted about 2 years ago
Hey Gravit, congratulations for your solution!
Answering your question:
Use the flex property
flex-direction: column-reverse;
to have the image on the top.If you want to add the same effect of the design for the image overlaying it with
purple
there's a shortcut that is by usingmix-blend-mode
with the modemultiply
and with an opacity aroundopacity: 82%
. See the code below:img { mix-blend-mode: multiply; opacity: 82%;}
Hope this helps, keep it up
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