The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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;

    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:


Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed