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

Posted by Gina Scalpone
Gina Scalpone
21,330 Points

How do I display a paragraph in a media query that was originally hidden?

Hi, I designed a pretty header for my site for desktops and larger tables, but it won't look good on mobile. I built my mobile site first, and now I'm trying to implement the nicer header in my media queries. Everything is working except one paragraph element, which I initially hid using the display property. Now, when I try to display it, nothing shows up.

<p class="down-arrow"><a href="nav">&#8744;</a></p>

/*STYLE.CSS*/
.down-arrow {
    display: none;
}

/*RESPONSIVE.CSS*/
.down_arrow {
    display: block;
}

I also tried the visibility property, that didn't work either. Anyone know what I'm missing?

2 Answers

Erick Kusnadi
Erick Kusnadi
21,615 Points

In the responsive css there's an underscore rather than a dash.

.down-arrow vs .down_arrow

/*RESPONSIVE.CSS*/
.down_arrow {
    display: block;
}

Should be like this in the media query

/*RESPONSIVE.CSS*/
.down-arrow {
    display: block;
}
Damien Watson
Damien Watson
27,419 Points

Like he said ;)

Damien Watson
Damien Watson
27,419 Points
Damien Watson
Damien Watson
27,419 Points

Hi Gina,

I see the problem, In your 'responsive' you have misspelt the classname, it should use a hyphen not an underline, so:

.down-arrow {
    display: block;
}