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.

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
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Dale Severude
Full Stack JavaScript Techdegree Graduate 71,324 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?