Grow your CSS skills. Land your dream job.

media query

  • # April 26, 2013 at 11:05 am

    hi

    i am using flexslider and i want the image on my slide NOT to appear at lower resolutions. this aint working… what will?

    @media screen and (max-width: 860px) {
    .flex-direction-nav .flex-prev {opacity: 1; left: 0;} .flex-direction-nav .flex-next {opacity: 1; right: 0;}
    }

    @media only screen and (min-width : 860px) {

    .flexslider .slides img {
    z-index: -1;
    float:right;
    display:block;
    width: 100%;
    }

    @media screen and (min-width: 600px) and (max-width: 860px) {
    .flexslider .slides img { display: none; }
    }

    # April 26, 2013 at 11:10 am

    Do you have a link?

    # April 26, 2013 at 11:12 am

    russjohnson.co.uk/Beamtest

    # April 26, 2013 at 11:15 am

    Rather than hide the image…shouldn’t you be hiding the entire slider?

    # April 26, 2013 at 11:25 am

    just the image for now.

    # April 26, 2013 at 11:31 am

    >just the image for now.

    But what does that get you? The space will still be there.

    In any case, I’m not seeing that code on the current site:

    @media screen and (min-width: 600px) and (max-width: 860px) {
    .flexslider .slides img { display: none; }
    }

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

You must be logged in to reply to this topic.

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