@AkoToSiJeromeEh
Posted
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 helpful
@kevinx9000
Posted
@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.
