Quick little CSS hack when on a Code Challenge

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. :)

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.

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