div with css visibility not showing on mobile device

[lassege]

Hey there!

I’m in the middle of a project and I’ve got stuck and hoped you folks could help me out.
Currently I’m trying to optimize the design for both pc and mobile device and here’s problem — the menu I would like to show on the mobile won’t appear.

The code can be seen here: http://cdpn.io/nqpLo

As you can see I’m using a sticky footer holding the menu(‘s) one is hidden with the help of an id tag and given the css attribute “visibiilty:hidden;”
The other is visible for the pc(or laptop ofc) user.

Thanks in advance – If you’re in doubt or I’m not explaining myself well enough please do let me know :)

– Lasse

[Anonymous]

replace “visibility:” with “display:” and for the element you want to hide change “hidden” to “none”

[lassege]

@Jarolin, thanks for your repley.

just to be sure I’m doing this correctly.

link 1, link 2, link 3

link 1, link 2, link 3

Here the css part for pc:

#computer_menu{visibility:visible;}

#mobile_menu{display:none;}

css part for mobile device:

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {

#mobile_menu{ visibility:visible;}

#computer_menu{display:none}

}

Didn’t work out for me (think misunderstood something)

I would like to show

on mobile device but doesn’t.

[lassege]

ups didn’t mean to make the letters that big :S

[Anonymous]

change “visibility:visible” to “display:visible”.

[wolfcry911]

Jarolin, you may want to visit the specs from time to time. ‘visible’ is not a valid value for the display property. Visibility:visible and hidden are perfectly valid however.

[lassege]

@Jarolin, I tried it out but seemingly didn’t work — I’m using DreamWeaver it weren’t suggested either. Maybe there’s something else that I’ve missed out in the code, however I’m not sure.

[lassege]

@wolfcry911, maybe you can help me out? :) I would like to use css without using jQuery, js or any other fancy pancy coding to solve this issue I’m troubling with.

[lassege]

@Jarolin, @wolfcry911: I found a solution and wanted to let you know.

Using the attribute Visibility:hidden; it still takes up space despite being hidden but by using display:run-in;
> The Element is rendered as block-level or inline element. Depends on context – w3schools.com

thanks for your time.

Lasse

[Author]

Posts