Use the CSS Transform scale Property to Change the Size of an Element

Tell us what’s happening:

messing with the scale value on selector in #ball2 but no value I enter works

Your code so far


<style>
  .ball { 
    width: 40px;
    height: 40px;
    margin: 50 auto;
    position: fixed;
    background: linear-gradient(
      35deg,
      #ccffff,
      #ffcccc
    );
    border-radius: 50%;
  }
  #ball1 {
    left:20%;
  }
  #ball2 {
    transform:scale(2);
    }


</style>

<div class="ball" id= "ball1"></div>
<div class="ball" id= "ball2"></div>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-change-the-size-of-an-element

What do you mean by “nothing works”? If I run this code, ball2 does appear larger than ball1. Could you give some extra detail about what the code does for you vs. what you expected to it to do?

sorry, I’m new to this but I know I have to change the size value of that selector to 1.5 times it’s size, so I was messing around with the values, I even entered 2 values with a comma in between, what I mean is no value I enter seems to work, what am I missing? a calculation? some brain cells? I know the syntax is correct for the browser, this seems like it would be so simple. and to answer your question, when I enter different single values one circle elongates on either the Y or X axis, don’t know which.

1 Like

Heh, I doubt you’re missing any brain cells.

Sorry, I didn’t read the challenge before my first response. After looking at it, I think the problem is just that you’re using ‘transform: scale(2)’ but the challenge asks you to “Increase the size of the element with the id of ball2 to 1.5 times its original size.” The code you’ve posted increases the size of ball2 to 2 times its original size, rather than 1.5.

Looks like the instructions say to make it 1.5 not 2 like in the example?

this may be the most retarded question of the century but if 1 double is 2 then 1.5 doubled is 3, right?

I believe they mean 1.5 times of whatever its size would be without ANY previous transformations applied.

I reset the lesson and got it back to the beginning value, #ball2 only has a “left” value of 65%, there is a space open for the scaled value

.ball has two values for width and height at 40px each

totally boned on this one

Yeah, so just apply the transform rule there with the appropriate value for the scale().

I guess we found an error michaelfoland3m, I did what you said and put the rule in the .ball instead of the #ball2 which is what it tells me to do, maybe we can report that

and thank you so much, it worked!!

Huh, weird. If I put it in .ball { } it doesn’t work, but it does work in #ball2 { }. Anyway, I’m glad you got it working.

I’m on a mac using chrome, wonder if that matters

can you friend people on here?

I had an issue as well, but ended up resetting the code because I was messing with other values and forgot what the originals were. By placing the [transform: scale(1.5)] into the open space, provided in the #ball2 element, I was allowed to move on. If you make any other adjustments, even if the changes don’t impact the task at hand, the system will run a failed-test until the correction is made.

Edited addition:
From the looks of your original post, the code you provided deleted the spacial arrangement of the second ball, #ball2.:
}
#ball1 {
left:20%;
}
#ball2 {
left:65%;
transform: scale(1.5);
}

1 Like

You have to pay attention that there are no spaces after scale. In the following examples, 2 is wrong.

example 1.
#ball2 {
transform:scale(2);
}

example 2.
#ball2 {
transform:scale (2);
}

Putting
transform: scale(1.5) in #ball2 works, make sure you didn’t omit semicolon else it won’t work.

1 Like

#ball2{
transform: scale(1.5);
}

Its work for me