Design comparison
Solution retrospective
EDITS: Max-width of the card container lowered from 63.75rem to 30rem for mobile screen sizes
A margin of 1.5rem is applied to the main element.
Mix-blend-mode is applied to the image and opacity of 0.75.
Thanks @solracss !!
Thank you for checking out my solution to this challenge. I believe some areas need to be refractored in order to have a smoother transition between mobile and desktop versions.
I am not sure I am on the right path to properly setting the color overlay to the image.
Always looking for new knowledge regarding best practices and accessibility.
Community feedback
- @grace-snowPosted over 1 year ago
This is a really nice solution, well done!
Only a few minor suggestions
- for the list without list styling to be consistently accessible as a list, you need role of listitem on each li as well as the role of list on the ul
- the source inside a picture element can't have an alt attribute. Pictures only have one alt and that goes on the img part
That's all from me, well done again
Marked as helpful1@jasnoludekPosted over 1 year agoThank you @grace-snow, I made the changes to the html as you described.
0 - @solracssPosted over 1 year ago
Add
mix-blend-mode: multiply;
, changeopacity
to 0.75 for your image and you got it.For RWD you can add
max-width
for your card (decide what would be the best) mobile version. This would prevent for enormous streching.I'd suggest switching to desktop at around ~1200px.
https://getbootstrap.com/docs/5.0/layout/breakpoints/
Marked as helpful1
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