Stuck at 5/9 mixins and the & selector


#1

Hi everyone,

The instructions saysInvoke the mixin inside of .notecard, add the following:@include transform-style(preserve-3d);

I have tried several options, it says Did you include your mixin inside of .notecard in main.scss and pass in a value of preserve-3d?

I dont want to use the get code option, I did so once but the systems gives than gives the code for the rest of 5/9 exercise and not this particular part.

.notecard {
  
  &:hover{
      @include transform (rotatey(-180deg)); 
    @include transform-style(preserve-3d);
    }
 
  width: 300px;
  height: 180px;
  border: 1px solid black;
  display: inline-block;
  margin: 20px;
  font-family: Roboto, sans-serif;
  box-shadow: 1px 1px 2px 2px rgba(0,0,0,.2);
 
  
  .front, .back {
    width: 100%;
    height: 100%;
    position: absolute;
    @include backface-visibility;
  }

Thanks


#2

Hi there, can you post your full code, including the mixins?

Also, note that the @include transform-style line should be outside of the &:hover selector.


#3

Dear Nedwards,

Thank you for your fast reply yesterday, I got it now, I made typing errors at the top mxin,

@mixin transform-style($style){
 transform-style: $style;
-moz-transform: $style;
-o-transform-style: $style;
-ms-transform-style: $style: <
-webkit-transform <: $style: <
}


corrected complete version.

@mixin transform-style($style){
 transform-style: $style;
-moz-transform: $style;
-o-transform-style: $style;
-ms-transform-style: $style;
-webkit-transform-style: $style;
}


@mixin backface-visibility ($visibility:hidden) {
  
  //Add an argument
  backface-visibility: $visibility;
  -webkit-backface-visibility: $visibility;
  -moz-backface-visibility: $visibility;
  -ms-backface-visibility: $visibility;
  -o-backface-visibility: $visibility;
}

@mixin stripes($direction, $width-percent, $stripe-color, $stripe-background: #FFF) {
  background: repeating-linear-gradient(
    $direction,
    $stripe-background,
    $stripe-background ($width-percent - 1),
    $stripe-color 1%,
    $stripe-background $width-percent
  );
}

@mixin transform($transformation) {
  transform: $transformation;
  -webkit-transform: $transformation;
  -moz-transform: $transformation;
  -ms-transform: $transformation;
  -o-transform: $transformation;  
}

@mixin photo-content {
  object-fit: cover;
}

//Add your own mixins here

.notecard {
  
  &:hover{
      @include transform (rotatey(-180deg)); 
    @include transform-style(preserve-3d);
    }
  @include transform-style(preserve-3d);
  width: 300px;
  height: 180px;
  border: 1px solid black;
  display: inline-block;
  margin: 20px;
  font-family: Roboto, sans-serif;
  box-shadow: 1px 1px 2px 2px rgba(0,0,0,.2);
  
  
  .front, .back {
    width: 100%;
    height: 100%;
    position: absolute;
    @include backface-visibility;
  }
  
  .front {
  z-index: 3;
  font-size: 20px;

    .word {
      display: block;
      text-align: center;
      position: relative;
      top: 40%;
    }    
  }
  
  
  .back {
  z-index: 1;
  word-wrap: break-word;
  line-height: 1.6;
    @include transform(rotatey(-180deg));
    .definition {
      width: 100%;
      height: 100%;
            
      .photo {
        width: 60%;
        margin: 0px auto;
        
      }
    }
  }
}

#4

Hi Nedwards,

Maybe I was optimistic,

I see that .notecard part differs from that of other people and part 3 of exercise is not working:

I got this notice:

Did you include the transition mixin with a total of 0.4s in main.scss?

I also read that it is better to use another browser than Firefox:

I study on it.

Greetings,


#5

Sorry for the late reply! Yeah, the third part of the exercise asks you to add the following mixin to the top of your code:

@mixin transition($time){
  transition: $time;
  -webkit-transition: $time;
  -moz-transition: $time;
  -o-transition: $time;
}

Then include the mixin inside your .notecard selector using @include transition(0.4s)

Don't worry too much if your code differs from that of others - it may be that they've placed certain selectors or properties in different orders. All that matters of course is efficient, readable and functional code!

Are you saying you're stuck because you don't understand or that the lesson isn't letting you pass despite using "Get Code"?


#6

Dear Nedwards,

Thank you for your reply. I have used Chrome for the last part of 5/9 and it works better than Firefox and Explorer. In Chrome it was passed.

I did not use "Get Code", if you use this the system gives the codes for the remainder of the exercise. Can codecademy make it so that it give a the code bit by bit and not for the rest of an exercise?
I indeed sometimes dont understand a part of a lesson. Or it can be a typing error or wrong browser.

So the order to place a piece of code can vary a bit, I mean there is no specific to place them?

Greeting,


#7

Glad to hear it worked in the end.

As long as it doesn't break the function of the program, there is no "right" or "wrong" way to order your code. You'll find over time that certain methods of organisation might suit you better than others (I believe the Sass lessons will cover that), but in general it's important that:

a) Your code is efficient
and
b) Your code is easy to read


#8

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.