Loopstudios landing page - React, Sass, BEM, hooks, grid, flexbox

Solution retrospective
My biggest question for this project is why the property "justify-self" wasn't responding in the media query. My guess is, since the the element I was trying to move was an image, the rules could change (maybe?). Which is weird, because I expent a little bit looking at documentations and blogs I couldn't find anything about it.
Result is, if you look at the social links in the footer in mobile mode, they won't be centered. Also, the intro part was a bit tricky. I'm still not sure how to move one box over the other without setting fixed values. Maybe I didn't put enough thought in it.
Any help is welcome! Ps.: I know it looks ugly while resizing.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @nakoyawilson
I took a look at your code and I'm not familiar with Sass but I noticed in your main.css file for your media query you have
__icons { ... }
instead of.footer__icons {... }
and I downloaded your code and ran it using.footer__icons {... }
and that centered the icons for me.Marked as helpful
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