Bringing in new elements with Media Queries

Question

I'm gonna try to reword this more properly as the last two questions pertaining to this topic go no answers and little feedback, not sure why.

I want to know if I can hide elements using CSS3 Media Queries and call them only at certain resolutions (Lets say a div box hand coded within a footer widget)

Hide it at all view ports until, lets say 480px; then we'll have it display.

Is this possible - and could it be done with something like:

All viewports where you don't want it displaying = visibility: hidden;

Then you want it to display and you code= display: inline;

This obviously doesn't work as I've just tried it, but is there a similar way to do this with CSS, is this the best approach? Ultimately, my goal is to pull in accordion to display content for mobile at 480px below.

Hmm... it would have been better to edit your original question rather than posting a new one from scratch, since your previous questions didn't get any responses anyway. You could delete your older questions, or if you can't do that, flag them and I'll take care of it. — BoltClock, Feb 07 '12 at 14:30

score 3 · Accepted Answer · edited May 23 '17 at 12:03

3

It's definitely possible, except you'll want display: none, not visibility: hidden. There is a reason why these are two distinct properties.

edited May 23 '17 at 12:03

Community

1
1

answered Feb 07 '12 at 13:49

BoltClock

700,868
160
1,392
1,356

Thanks, So what I've described is possible? – Dr Upvote Feb 07 '12 at 13:50
1

Yeah, if you can `display: none` it in certain sizes, there's no reason you couldn't do it in others instead. – BoltClock Feb 07 '12 at 13:50
So, I've just done a test and it works. Do you think I could pull an a jQuery accordion like this? – Dr Upvote Feb 07 '12 at 13:53
2

Well I haven't worked with jQuery/CSS accordions before, but you can give it a try! – BoltClock Feb 07 '12 at 13:58

Bringing in new elements with Media Queries

1 Answers1