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

Community feedback

• 

  Vinci Taylaran•185

  @vincitaylaranPosted over 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!!

  1

  ---

  

  spymon•90

  @spymonPosted over 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 😊

  0
• 

  Elizabeth•460

  @gelizabethPosted over 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!

  1

  ---

  

  spymon•90

  @spymonPosted over 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 😊

  0