Grow your CSS skills. Land your dream job.

Bootstrap Flexslider thingo

  • # April 29, 2013 at 11:50 am

    Using ye olde bootstrappe for a site im building, there is a flexslider at the top of the page, ideally i want the images to a) not resize at all on lower resolutions (ipad) and not show at all for the lowest resolutions (handheld) i have tried my hand at sticking in a media query to overcome this, however it doesn’t seem to want to know about it. It looks like so:

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

    width: 50%;
    }

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

    .flexslider .slides img {

    display: none;
    width: 50% !important; }
    }

    .flexslider .slides p {
    float: left;
    width: 50%;
    }
    }

    work in progress website here: http://russjohnson.co.uk/beamtest/

    ayethangyew.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

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