Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

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

#react#sass/scss#bem
mattreee 270

@mattreee

Desktop design screenshot for the Loopstudios landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

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.

Community feedback

Nakoya Wilson 1,530

@nakoyawilson

Posted

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

0

mattreee 270

@mattreee

Posted

@nakoyawilson You actually saved me, thank you! I just forgot to nest the "__icons" inside the ".footer" selector. So every time the media query ran, it didn't select the right class.

Also, if you're interested: https://css-tricks.com/the-sass-ampersand/ Two or three scroll down the page and you can see a nice gif of what the ampersand does in sass.

Thank you again!

0
Nakoya Wilson 1,530

@nakoyawilson

Posted

@mattreee You're welcome! Glad I was still able to be helpful even though I do not actually understand how Sass works. I just took a look at the differences between your updated and previous main.scss and I see now how __icons is supposed to be nested. I'll take a look at the resource you linked to to try to understand more. By the way, you didn't delete the it's not working comment in your updated file.

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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