Design comparison
Solution retrospective
Reviews Are Welcome
Community feedback
- @correlucasPosted about 2 years ago
👾Hello Bassey Ukeme, Congratulations on completing this challenge!
👨💻 Here are some tips to improve your solution code:
1.The easiest way to build this component and make sure that each column will have 50% of the container size is by using
GRID
. All you need to do is to usedisplay: grid
to activate the Grid and then make the two columns withgrid-template-column: 1fr 1fr
and its done, now you’ve two columns. For theMOBILE VERSION
you can switch toflex
creating a media query usingdisplay: flex
andflex-direction: column-reverse
to make the image appear before the text content.2.To make the image have a better fit inside of it, make the component image responsive with
display: block
andmax-width: 100%
(this makes the image fit the column/div size) and respect the component size while it scales down. To make it crop while scaling useobject-fit: cover
.img { display: block; object-fit: cover; max-width: 100%; }
3.The way you’ve applied the purple color is fine, but if you want the exact color tone of color of the challenge designs, you need to use
mix-blend-mode
to make the color blend between the image and the background-color of the container. See the steps below to apply to theimg
orpicture
selector:img { mix-blend-mode: multiply; opacity: 75%;}
✌️ I hope this helps you and happy coding!
Marked as helpful0 - @AdrianoEscarabotePosted about 2 years ago
Hi Bassey Ukeme, how are you?
I really liked the result of your project, but I have some tips that I think you will like:
I noticed that the content is stretching a lot at higher resolutions, to fix this we can put a maximum width:
main { max-width: 700px; }
Prefer to use
rem
overpx
to have your page working better across browsers and resizing the elements properlyThe rest is great!!
Hope it helps...👍
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