5. Mixin Facts - Task 3

#1

I'm really not sure what I'm doing incorrectly here. I've heard that this exercise might be bugged but perhaps I'm just being very silly and missing something very obvious. I'm pretty sure I've followed the instructions exactly though, placing the mixin at the very top of main.scss and adding @include transition(0.4s) inside .notecard.

I don't seem to have any errors pop up, and no matter how much I click run it doesn't seem to come up with the prompt to give me the code. So I'm completely stuck. I've even tried restarting the exercise a few times. Please tell me I'm just being silly!

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

// More 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);
  @include transform-style(preserve-3d);
  @include transition(0.4s);
  
// More Selectors Here
#2

Just saw some people in other forum's complaining that the code doesn't seem to work in Firefox. I tried switching to Chrome and with no change in my code it has marked it as correct and has let me progress.

Apparently the prompt to retrieve the code doesn't always work in Firefox either.

It's weird though since I managed to complete the AngularJS, Python and Git courses just fine without any issues in Firefox?

#3

I'm actually using Google Chrome right now, and it still isn't working at all.

#4

I faced exactly the same problem, retried, refreshed. Nothing works.
Btw I use Firefox.

Here's my code
@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 transition($time){
transition: $time;
-webkit-transition: $time;
-moz-transition: $time;
-o-transition: $time;
}

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

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

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

.notecard {
@include transform-style(preserve-3d);
@include transition(0.4s);
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));
}

.front, .back {
@include backface-visibility;
width: 100%;
height: 100%;
position: absolute;

}

.front {
z-index: 3;
font-size: 20px;

.word {
  display: block;
  text-align: center;
  position: relative;
  top: 40%;
}

}

.back {
@include transform(rotatey(-180deg));
z-index: 1;
word-wrap: break-word;
line-height: 1.6;

.definition {
  width: 100%;
  height: 100%;

  .photo {
    width: 60%;
    margin: 0px auto;

  }
}

}
}

#5

UPDATE: I confirm that the problem is solved when you use Chrome browser.

#6

What version of chrome because I've used chrome to do this and it isn't working for me. I also tried using exploder and I still get the same results as firefox.

#7

I'm having the same exact problem using Chrome newest version.

#8

@cactusking0 My Chrome Version is 49.0.2623.112 (64-bit).
@kennybjr87 Did you try refreshing the page, log out & sign in again? Perhaprs it'd help.

#9

I tried your version and I am still having trouble with it. Perhaps I need to change operating systems. I will try Linux when I get home tonight to see if that helps. I tried on Windows, but not Mac. I logged out and in as well as refresh each step of the way.

#10

Are you getting the prompt for Codecademy to give you the code and progress? Because that might be the best course of action since this task definitely seems to be bugged since so many people are getting the same problem.

This worked fine for me in Windows after I switched to Chrome.

If it helps, the Chrome version I'm using is 52.0.2743.116 m

#11

I tried multiple versions of chrome as I have backups on my mac at home. I would also like to state that I have never seen a prompt like you are talking about. I've never seen a prompt that would give me the code to just get it over with. Is there any browser that doesn't suck for this stuff?

#12

Okay for some reason after reinstalling chrome it worked. Don't ask me what I did...

#13

I don't necessarily think it's the browser that sucks but it being a bug with this particular task. A lot of people seem to be having this problem here but not elsewhere on Codecademy. It's very weird that at least in my case the exact same code passes in Chrome but not Firefox. It's probably best if we all report this as a bug to Codecademy so it can be looked into at the very least.

#14

Cool! Even machines sometimes need a moment of rest :grin:

#15

You are right. Sometimes they just need a break or they are just stupid. I tend to lean more towards that the machine is stupid.

#16

Yes, in Chrome works. Weird

#17

Me too, I confirm that Chrome browser usage solved the problem. Now back to Firefox :wink:

#18

I have exactly the same problem. ,Fails in Firefox (49.0b6). Works in Chrome (52.0.2743.116 m (64-bit)).

#19

Ditto there; works in Chrome.

#20

works in chrome, but 7. string interpolation doesnt work in chrome... ughhhhh