Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

General Discussion

Sean T. Unwin
Sean T. Unwin
28,660 Points

Quick little CSS hack when on a Code Challenge

When you're on a code challenge, do you ever find that the challenge request scrolls off the page and often have to scroll back up to read the challenge again?

3 Answers

Sean T. Unwin
Sean T. Unwin
28,660 Points

You can apply this little CSS snippet to keep the challenge request at the top of the page:

  • Open your Dev Tools
  • Find the <div class="secondary-heading challenge-heading"> element
  • Put the following CSS in the Rules section of the Inspector window:
position: fixed;
top: 10px;
width: 80%;
max-width: 700px;
background-color: white;
z-index: 100;

Note:On displays that are less than 850px wide you will also have to change the <header> to opacity: 0.5 or whatever you are comfortable with to still use the navigation.

Voila! Now the challenge request is at the top of the page, over the header, and you can always see it. No more scrolling up and down to read it again.

I hope some find this helpful. :)

Tommy Gebru
Tommy Gebru
30,150 Points

Really great idea, definitely useful when navigating a challenge page. It works but my css seems to be affected. This should definitely be something for Treehouse staff to consider tweaking for a flawless experience.

Sean T. Unwin
Sean T. Unwin
28,660 Points

Thank you.

I edited my post for those with mid to small width screens. See the note. Does that help in any way?

Hey Sean, just a heads up to let you know that we're actually working on a fix for that (to lock in the code challenge as you scroll down the page). It should hopefully be up within the next few weeks. I like that you're getting creative about how to make improvements like that though! :)

In the future, feels free to reach out to us or even send me a message directly if there are some improvements you'd like us to make! I'm all ears :)

Best, Ryan

Sean T. Unwin
Sean T. Unwin
28,660 Points

Thank you Ryan. Very cool.

I was going to email you ( well, the support team) as well after I was finished fine-tuning the snippet for most displays (hopefully).

I hope I didn't cross any bounds by posting here first. I simply wanted to help everyone out, myself included so I didn't forget it either.

Cheers. :)

No worries Sean. I'm glad you're so eager to help out!