Skip to content
Submitted almost 3 years ago

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

mattreee•270
@mattreee
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Loopstudios landing page
  • HTML
  • CSS
  • JS
2junior

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
    @nakoyawilsonPosted almost 3 years ago

    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
    @mattreeePosted almost 3 years ago

    @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
    @nakoyawilsonPosted almost 3 years ago

    @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

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