Design comparison
Solution retrospective
I am currently avoiding accessibility features..Was there any optimal way of writing the same code? @correlucas Any tricks or special sauce suggestions?
Community feedback
- @PVIdubsPosted over 2 years ago
Hi Viraj Chavan... Great Work... To achieve the same transparency effect in the illustration try:
mix-blend-mode: multiply;
andopacity: 0.8;
in theimg
element...I hope it helps you in something... Once again great work and happy coding... β
Marked as helpful1 - @correlucasPosted over 2 years ago
πΎHello Viraj, congratulations for your new solution!
I saw that you've already fixed the issue with the image overlay, thats nice, an alternative is using
filter
but they way you did work betterMake the container responsive with
max-width
instead ofwidth
usingwidth
you make the container have a fixed size and withmax-width
this allows the container to contract and scale with the screen:Here's the code fixes I did for you:
@media (min-width: 1000px) .container { max-width: 1110px; flex-direction: row-reverse; }
To improve the image behavior and make it responsive too, T add
display: block
andmax-width: 100%
andobject-fit: cover
to make the image auto-crop when resizing inside the column:img { display: block; object-fit: cover; max-width: 100%; }
π I hope this helps you and happy coding!
Marked as helpful0
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