Learn CSS Transforms by Building a Penguin - Step 30

Tell us what’s happening:

Task:
Target the .penguin-head element, and give it a width half of its parent’s,
Hint:
You should give .penguin-head a width of 50%.

Question:
I do not understand why 150px ( which is the half of the parent width) is not accepted here. Could someone elaborate on this?

Your code so far

.penguin {
width: 300px;
height: 300px;
margin: auto;
margin-top: 75px;
z-index: 4;
position: relative;
}

.penguin-head {
width: 150px;
height: 45%;
background: linear-gradient(
45deg,
gray,
rgb(239, 240, 228)
);
}


Challenge: Learn CSS Transforms by Building a Penguin - Step 30

Link to the challenge:

You are using absolute units instead of relative percentages

Could i have used relative units for both width and height, and then would that be acceptable?

Give it a try!

I have meant to say, more in general context.
It wouldn’t be accepted here as the task specifically indicates to put 45% for height.

See below for the full task:

Step 30:
Target the .penguin-head element, and give it a width half of its parent’s, and a height of 45%. Then, set the background to a linear gradient at 45deg starting at gray, and ending at rgb(239, 240, 228).

That being said, maybe this is what we meant to learn from this task; both units should match :slight_smile:

Thanks for the quick response, btw!

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