Stats Preview Card Component
Solution retrospective
Couldn't get color to match for the image. Tons of time wasted cuz someone gave me terrible advice on a previous post to use <picture> for responsive images, but I couldn't modify it using css. So I just used another method.
Had major issues with the sizing of the divs for the mobile format. I would set the image-div to 40% height and info-div to 60% height. But neither one would adjust accordingly despite trying to set the parent div to have a set height.
Hope someone can help me figure this out. Thanks.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @AkoToSiJeromeEh
👋 Hi! Great work out there! In my experience creating this challenge, I used mix-blend-mode on the image to match the color in the design reference. Additionally, I noticed that you used display: flex on the <div> stats-div elements. I suggest using display: grid with a three-column setup (grid-template-columns: 1fr 1fr 1fr) to also match in the design reference also when it hit 375px of width i see the image is have a little gap you can use (vertical-align: middle;) on .main-graphic . That's all! I hope this helps and works for you. Thank you, and happy coding ! 🚀
.image-div {
position: relative;
background-color: var(--theme-soft-violet);
}
.main-graphic {
width: 100%;
height: 100%;
mix-blend-mode: multiply;
content: url(./images/image-header-desktop.jpg);
/* background-color: var(--theme-soft-violet); */
opacity: 0.8;
vertical-align: middle;
}
.stats-div {
display: grid;
grid-template-columns: repeat(3,1fr);
margin-top: 50px;
}
Join 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