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.
