Submitted about 3 years ago

Tried SASS and BEM for the first time, also added some animations

spymon• 90

@spymon

Preview site View code

This is a solution for...

Social proof section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I tried SASS for the first time and I love it! Nesting is awesome, but I don't know how to do @medias with SASS, I created new @media for almost every class..
I have a bug in a code, and I don't know how to fix it... On the mobile screen, the testimonials section has a big gap without margins or paddings, and the last testimonials card is cut off the screen.

Any feedback on how to do that is more than welcome! <3

Community feedback

Vinci Taylaran• 185

@vincitaylaran

Posted about 3 years ago

Fantastic work! For the bug you mentioned, one way I fixed it was by giving the .testimonials a margin-top: -260px and height: 1100px.

@media screen and (max-width: 1100px) {
  .testimonials {
      height: 1100px;
      margin-top: -260px;
    
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
  }
}

It's not a clean fix but it should do the trick. If you or anyone else finds a cleaner fix, please do share!

Looking forward to your progress!!

spymon• 90

@spymon

Posted about 3 years ago

Hi @vincitaylaran 👋 Thank you for your suggestion. I appreciate it 💖

Somehow changing height and margin-top property didn't work out for me, but I added position: relative and changed top to lift the .card to the place I wanted.

@include media-md {
    .card {
        position: relative;
        top: -240px;
    }
  }

Thank you again for helping me out 😊

Elizabeth• 460

@gelizabeth

Posted about 3 years ago

Hi! Sass is really awesome. The problem that you had with media queries is easy solved with mixins. Check out this tutorial (about media queries from 1:50:00) . This will help you to understand and get used to Sass pretty fast. About gap issue - I can't help here, but the card is cut off because of your .container class has overflow: hidden. Hope, this will help you.

P.s I loved the animations!

spymon• 90

@spymon

Posted about 3 years ago

Hi @gelizabeth 👋 Thank you for your suggestion. I appreciate it 💖 I watched the video and fixed the mess in my code by creating new partials _config.scss to make @mixin's for different media queries breakpoints, and _responsive.scss to separate the media styles from _main.scss. Now it is way more maintainable and easy to read.

Yeah, removing the overflow: hidden property from .container did solve the problem I had.

Thank you for your help 😊

Please log in to post a comment

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