Grow your CSS skills. Land your dream job.

div with css visibility not showing on mobile device

  • # May 18, 2013 at 4:26 pm

    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

    # May 18, 2013 at 4:57 pm

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

    # May 18, 2013 at 6:17 pm

    @Jarolin, thanks for your repley.

    just to be sure I’m doing this correctly.

    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.
    # May 18, 2013 at 6:19 pm

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

    # May 18, 2013 at 6:28 pm

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

    # May 18, 2013 at 9:48 pm

    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.

    # May 19, 2013 at 11:32 am

    @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.

    # May 19, 2013 at 11:45 am

    @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.

    # May 19, 2013 at 12:55 pm

    @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

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".