Repositioning ONE image in the Nivo Slider plugin

Question

I'm quite new to web development and jQuery, so please bear with me.

I'm using Nivo Slider on a website that I'm working on. It's a responsive website, and I want the slider to be easily visible on all screen sizes. I've set a breakpoint in my CSS so that when the site gets to its smallest size (around the size of a mobile screen) the slider is set to 200% width, with the overflow hidden, so that the images are larger.

This works fine, however at this size you can only see the center of the slider, while the sides are cropped off by the edge of the screen. For most of the images I'm using this isn't a problem, however one of them is cropped very awkwardly. It's easy to reposition the whole slider, but I want to try and move this ONE image over so that it can be better seen on small screens.

The CSS I've added to the default nivo-slider.css is:

@media screen and (max-width: 31.25em) { /* 500px ÷ 16px */

.slider-wrapper{
    overflow: hidden;
}

.nivoSlider {
    left: -50%;
    width:200%;
}

.nivo-caption {
    margin-left: 25%;
    width: 50%;
}

}

Thanks very much!

Answer 1

Just using CSS, you could add a one-off type class to that particular image, and throw that into your @media query:

.my-one-off { left:??px; margin-right:??px }

You could search for that image with jQuery as well (if I'm not mistaken, Nivo uses the jQ library).

$('img[src*="one-off.jpg"]').css('margin-left',35); // just an example

Or

$('img[src*="one-off.jpg"]').addClass('my-one-off');