Grow your CSS skills. Land your dream job.

Make div disappear with CSS media queries on screen width.

  • # March 14, 2013 at 2:59 pm

    How do i make a div/image disappear when the screen reaches a certain width using media queries?

    # March 14, 2013 at 4:12 pm

    Disappear how?

    Remove it from the DOM or just hide it?

    # March 14, 2013 at 5:45 pm

    I don’t think he means removing from the DOM. Anyway, that couldn’t be done. But you could hide it.

    @media (max-width: 40em) {
    .element {
    display: none;
    }
    }

    # March 15, 2013 at 5:58 am

    >I don’t think he means removing from the DOM. Anyway, that couldn’t be done

    With JS you could…couldn’t you?

    # March 15, 2013 at 6:39 am

    @media (max-width: 40em) {
    img {
    visibility:hidden;
    }
    }
    also works…you can simply give the width…here “max-width” means devices less than width of or equal to…

    # March 15, 2013 at 6:46 am

    display:none

    is not the same as

    visibility:none

    http://codepen.io/Paulie-D/pen/39b45717797e5d4068d87de01c949386

    # March 15, 2013 at 7:57 am

    > With JS you could…couldn’t you?

    That would be too easy.

    # March 15, 2013 at 8:58 am

    > With JS you could…couldn’t you?

    Very easily, but that would require JS to do something you could (and have to) do with CSS only (Media Queries).

    # March 17, 2013 at 7:07 am

    @Paulie_D : got it! thanks :(

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