5. Mixin Facts

<PLEASE USE THE FOLLOWING TEMPLATE TO HELP YOU CREATE A GREAT POST!>

Okay I don’t think I am doing anything wrong, but I am struggling to get through Sass for some reason. I have tried Firefox, Chrome, and Exploder, but nothing is working for me. If I have something wrong in my code please tell me what it is so that I can fix it. I have tried everything from switching browsers to switching computers to copy-pasting the code directly into the box. I somehow managed to get to the third exercise by a miracle and now nothing is working. One other thing that I have noticed is that nothing has actually moved the word Titanosaur to be on the actual card before I hover over it and then it is backwards. Any clue as to what the deal is?
<Below this line, add a link to the EXACT exercise that you are stuck at.>
https://www.codecademy.com/en/courses/learn-sass/lessons/mixins-and-parent-selector/exercises/multiple-arguments?action=lesson_resume

<In what way does your code behave incorrectly? Include ALL error messages.>

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

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

@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 backface-visibility($visibility: hidden) { // Backface properties
backface-visibility: $visibility;
-webkkit-backface-visibility: $visibility;
-moz-backface-visibility: $visibility;
-ms-backface-visibility: $visibility;
-o-backface-visibility: $visibility;
}

@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 {
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);
&:hover{
@include transform
(rotatey(-180deg));
@include transform-style(preserve-3d);
@include transition(0.4s);
}

.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;
      
  }
}

}
}

Replace this line with your code.

<do not remove the three backticks above>

Without going over the instructions, my completed exercise has, backface-visibility, transform-style, transition, and, hover-color all below the line,

//Add your own mixins here

Could it be that order matters? Do some mixin’s need to appear before others? Not a rhetorical question, but one that needs to be followed up.

Not sure if the @include transform-style(preserve-3d); and @include transition(0.4s); are meant to be inside the &:hover{ selector. I put them directly within the .notecard{ selector.

This is what I used which allowed me to pass through Chrome:

.notecard {
  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);
  @include transform-style(preserve-3d);
  @include transition(0.4s);
  
  &:hover{
      @include transform (rotatey(-180deg));  
    }    
1 Like

My completed exercise has backface-visibility, transform-style and hover-color under this line but transition right at the top above stripes.

We have hit upon it, thanks to @angelalukic. The latter two includes belong outside of the hover rule, as standalone properties.

1 Like

I will do that when I get the chance this morning, if I get the chance that is. I was watching the other thread and you said something about prompting for the code. I’d like to say that I have no idea what you are talking about. I have never seen a prompt that says ‘here is the correct code’ for anything in any exercise that I have done and I’ve done numerous exercises. I would also like to point out that you are probably right about the exercise being bugged. I tried it on my mac last night and I had no varying results. I still could not pass it for the life of me. Thanks for all the help guys.

Okay I have some time this morning surprisingly. I did what you said and the damned thing still won’t work for me. I changed the code that you told me to change and that finally put Titanosaur on the card, but angelalukic’s advice did not work for me.

This is what is meant to appear if you click ‘Run’ enough times and are still getting the incorrect answer:

It wouldn’t pop up for me at all on Firefox during this task for some reason when it has done elsewhere.

I have NEVER seen that pop up before and as a reply to your other post in the other thread, I have noticed that it works out that way. I tried to do a few things in firefox to see if it is just firefox. I personally figure that it is firefox that doesn’t let it work nicely. I’m guessing that it is a bug in Codecademy programming that makes the exercises hate firefox.

1 Like

2 posts were split to a new topic: How to fix it?

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