Design comparison
Solution retrospective
Any suggestions on how I can improve are welcome!
Community feedback
- @correlucasPosted about 2 years ago
👾Hello @osamanazakat, congratulations for your new solution!
I saw your solution's live site and I've some suggestion for you Osama:
To make your hero image have the same look and the color purple overlay, you need to use
mix-blend-mode
using themultiply
one.The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.Here’s how you can add this to your
img
selector:img { mix-blend-mode: multiply; opacity: 84%;}
Here's a good article explaining these effects with mix-blend-mode:
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
main { min-height: 100vh; display: flex; justify-content: center; align-items: center; flex-wrap: wrap-reverse; padding-top: 9em; }
Something you can do to improve the image that needs to change between mobile and desktop is to use
<picture>
instead of<img>
wrapped in a div. You can manage both images inside the<picture>
tag and use the html to code to set when the images should change setting the devicemax-width
depending of the device (phone / computer) Here’s a guide about how to usepicture
:https://www.w3schools.com/tags/tag_picture.asp
✌️ I hope this helps you and happy coding!
Marked as helpful1 - @hyrongennikePosted about 2 years ago
Hi,
Congrats on completing the challenge just a few suggestion to look at. 1. On the main element you can remove the padding-top and add a
min-height: 100vh
to center the card, see below rule for the body:main { display: flex; justify-content: center; align-items: center; flex-wrap: wrap-reverse; min-height: 100vh; }
2. On mobile set a
flex-direction: column;
to stack the two flex container items. 3. Add the viewport tag in head of the html document for the website to scale properly on mobile devices:<meta name="viewport" content="width=device-width, initial-scale=1.0">
Marked as helpful1@osamanazakatPosted about 2 years ago@hyrongennike Thanks for the help Bro 👍. Can I ask you one more thing ? I couldn't make stats vertical in mobile view. Can you tell me something about that?
0@hyrongennikePosted about 2 years ago@osamanazakat you can add the following two declarations on mobile to the .stats-container
flex-direction: column; align-items: center;
also remove the fixed height from the .text-container on mobile. add
flex-direction: column-reverse;
to the main element on mobile. Remember to add the viewport tag in the head so that everything scales properly on mobile.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