Design comparison
Solution retrospective
Areas I had difficulty or would welcome feedback (although I'm open to feedback on anything!):
I tried using the <picture> element for the first time, since two different images were provided for mobile/desktop layouts; I struggled with creating the purple overlay for this.
I tried a mobile-first workflow, but that still feels like going backwards to me (understanding that I'm a complete novice who is learning through desktop techniques first), so my media code could likely use improvement.
I think I could have divided my sections/HTML a bit further, creating like a card-top and card-bottom areas, and then created a div for the underlying text. I discovered this too late while working on the desktop responsiveness secondarily and tried to adjust the text layout.
Community feedback
- @AkoToSiJeromeEhPosted over 1 year ago
Hi! Great Work Out There . I noticed that you use display: flex for the article stats, and i recommended using display: grid with grid-template-columns:repeat(3,1fr), which i use in order to match design references. and on overlay color you can use mix-blend-mode : multiply but I'm not 100% sure if this work and that's all I hope this suggestion works and helps (the bold text is the code i modify in your source code). thankyou and happy coding
article.stats {
display: grid;
grid-template-columns: repeat(3 , 1fr);
width: 500px;
padding: 20px 30px;
}
picture {
display: flex;
background-color: var(--accent);
opacity: 0.8;you can adjust this
}
img {
mix-blend-mode: multiply;
opacity: 0.7; you can adjust this
}
Marked as helpful0@kevinx9000Posted over 1 year ago@AkoToSiJeromeEh Thank you so much for taking a look and for your feedback! I definitely want to get more familiar with Grid as I rely on Flexbox too much, so that suggestion lets me know I need to lean more in that direction to improve my layouts.
1
Please log in to post a comment
Log in with GitHub
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