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!

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

Design Web Typography Final Project: Create a Typographic Site Polishing Touches

Why isn't my drawer working?

I am following along with the video. Even though [to the best of my knowledge] my code matches Mattox's, the benefit/aside content functions precisely as it did at the end of the previous exercise.

Great question. Unfortunately, I have not chosen to delve deeply enough into this, but there may certainly be some browser inconsistencies in this exercise.

When I adjusted the top position to be around -19.5em, instead of Maddox's -21.5em, it worked a little better; but, the columns were running into each other.

So, I don't know if there is a missing rule (I tried 'universal' box-sizing too), but I don't think it's anything that you did wrong based on following this tutorial.

I also downloaded the Project files, opened up the 'final' CSS file, and pasted it in my workspace - same results.

3 Answers

You have probably figured this out by now as it was a long time ago. I followed by typing on what Maddox had put in and this resulted in an empty 'aside' rule at the bottom of the media query. Once this was removed, everything worked as it should.

Dale Severude
.a{fill-rule:evenodd;}techdegree seal-36
Dale Severude
Full Stack JavaScript Techdegree Graduate 71,349 Points

What is your computer monitor screen width? If your screen is less than 1026px, then this exercise isn't going to work and your aside content will stay on the bottom of the page.

Try pasting your aside code inside a different media query, such as min-width = 54em, and then your drawer should work like in the video.

pat barosy
pat barosy
6,759 Points

What is the purpose of the aside:after in this example?