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 Unsubscribed User
Unsubscribed User
8,167 Points

Show/Hide Elements

If I have a table that is set to display:none....how do i show that table in a media query?

I want to show the table when users are on mobile phones, but not when they are on desktop-version.

Thanks!

4 Answers

Adam Soucie
PLUS
Adam Soucie
Courses Plus Student 8,710 Points
Adam Soucie
Adam Soucie
Courses Plus Student 8,710 Points

Just change the "display" property. You have several different options for it: http://www.w3schools.com/cssref/pr_class_display.asp

Gareth Redfern
Gareth Redfern
36,217 Points
Gareth Redfern
Gareth Redfern
36,217 Points

Hi Justin,

I would wrap your display none tag in the following media query:

@media only screen and (min-device-width : 720px) 
{
  table { display:none; }
}

That way the table will be hidden at screen sizes above 720px. It's worth noting though that you should test this out as not all mobile devices fall into this device width category and you may need to adjust as necessary.

Hope that helps

Unsubscribed User
Unsubscribed User
8,167 Points
Unsubscribed User
Unsubscribed User
8,167 Points

That does it! Thanks Gareth

Gareth Redfern
Gareth Redfern
36,217 Points
Gareth Redfern
Gareth Redfern
36,217 Points

No worries Justin, it may be worth you looking at http://teamtreehouse.com/library/media-queries if you have access to the bonus material.