Design comparison
Solution retrospective
Hey guys,
I've only done the desktop version of the mokup. I didn't really think about the responsivity when I set up the project. So, since all my heights and widths are fixed values it's screws everything up. I'll comeback later to fix it.
I had a tiny issue concerning the image. Oddly, the main container a tiny bit too large on the image' side and I don't know why. I had to shrink the whole container as I wasn't able to make the image fit. Moreover, I used the filter property to turn the image purple (the original is black&white) but I'm not sure if it was the right solution since the color doesn't match the reference.
Thanks for stopping by !
Community feedback
- @NationsAnarchyPosted about 2 years ago
Great to see you posting your solution up here, Bryan! And welcome to the frontendmentor.io community as well!
For coloring the image, instead of using the
filter
properties, I can suggest you to use themix-blend-mode
withopacity
- that should be much easier to remember and to implement as well.Plus, the most important key of responsiveness for web pages is to set a dynamic width/height numbers, not fixed ones. You can try
max-width
andmax-height
instead of straight on width/height, play around a bit and see if you can match the design better.Hope this helps, and happy coding!
1@MamieNorrisPosted about 2 years ago@NationsAnarchy thanks for your feedback ! I just checked mix-blend-mode on Google and it looks like a banger for this problem. Thabks I'll keep it in a corner of my head for next time !
Have a good one Scott :D
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