Design comparison
Solution retrospective
Did other people have trouble with the SVG overflowing on mobile?
Community feedback
- @grace-snowPosted almost 4 years ago
Hi, this looks pretty sweet, well done
Only real issue I see is the bottom of the card gets cut off on mobile landscape and the background doesn't seem to reach the bottom of my screen.
I think you should add
aria-hidden="true" focusable="false"
to both inline svgs (and fix the duplicate ID issue from the report, but that's not as major when it's flagging ids in an svg)Lastly, when you write alt text you don't need to say
photo of
orimage of
etc. The element is already announced as an image, so just write a description. In this case, the person's name would be fine.I hope that helps you. Good luck with your coding, you're off to a good start here
1@grace-snowPosted almost 4 years agoI just realised on slack you asked about other solutions and BEM!
Your BEM looks fine on this except for
card--grey-text
. That's not BEM, well it could be if it was placed on the same element ascard
and intending to modify the whole thing.This type of reusable class would probably be a utility class used throughout a project where needed. So I would make it
color--grey
or similar and not tie it to the compoment styles at all.You can see how I used scss, BEM and positioned bg images in pseudo elements in my solution and see what you pick up
1@aemann2Posted almost 4 years ago@grace-snow
Wow, thanks for all the good feedback. I hadn't caught the landscape problem, but I fixed it by adding a media query for landscape mode. For the SVG problem, I decided to just take the SVGs out of the HTML and set them / position them as background images. That solved my validation problems and also tided up my code.
I followed your advice for the BEM class...I believe what you're saying is that, because a color modifier could be used to modify other things on the page and not just the card, that I shouldn't tie it to just one block? I found BEM extremely useful for this project, especially when combined with SASS, but I'm still trying to get my head around when to use what and how.
Anyway, thanks again!
0
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