Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Foundations CSS Gradients Radial Gradients

J B
J B
7,466 Points
Posted by J B
J B
7,466 Points

Can anyone help my code?

I've been practicing the gradients. I did an android logo but when it is displayed in different sizes all the parts start moving around.

How can i make the code stay fixed regardless of screen. Also, if you think the code could've been made better, please, tell me so. Thanks

Here is my code: http://codepen.io/anon/pen/qoLBu

3 Answers

Nachiket Kumar
Nachiket Kumar
3,590 Points
Nachiket Kumar
Nachiket Kumar
3,590 Points

The problem is because you are using position: absolute; on the antennae and arms without applying position: relative; to the parent container (.box).

If you apply position:relative to the parent, it will work; you will need to re-calculate the positions of the arms and antennae, and it should be good to go. You can also rotate the antennae to be more precise :).

J B
J B
7,466 Points
J B
J B
7,466 Points

Hey manThanks! it worked. Do you mind telling me how to work the antenna? I knew it had to be sideways but i didn't know how to turn it lol

Any input in my code will be very welcome. (Newbie eager to learn.)

David May
David May
10,572 Points
David May
David May
10,572 Points

Hey J B , I would add a container div with a fixed size around your elements. Then position the elements of the logo in relation to that. Therefore that container and the parts positions will stay constant regardless of window size.

So, the container will have position:relative, then all of your logo elements will have position:absolute

Looking good!

Nachiket Kumar
Nachiket Kumar
3,590 Points
Nachiket Kumar
Nachiket Kumar
3,590 Points

J B, the best way to learn this stuff is to try and figure it out yourself, which you seem to be doing. Here's a hint- what you want to look for is CSS transforms, specifically the rotate value.

The Mozilla Developer Network is a great place to look for anything front-end related. Have fun, and share your final result!