Dodgy Slider. Close

Dodgy Slider. Close but no cigar!

I'm struggling with Upfront's built in slideshow element. I've got the desktop version working and looking how I want it to. But the mobile version isn't behaving as expected. The image doesn't remain central, for some bizarre reason it shifts to the right. It's also cropped so even if I try to hack it with CSS and try moving the image back over to the centre, part of the image is missing. When I open the Upfront editor, the slideshow looks nothing like the live version, making it impossible to work with. Take a look at the screenshots attached to see what I mean.

  • Predrag Dubajic
    • Support

    Hi Wayne,

    Thanks for the acces, I had a look at your site and it looks like this is caused by the text that’s included in the slider caption, the way you used it it defines height of the slider and the image is then cropped to fit in its holder.

    We could go around this with some CSS code.

    For mobile devices you can try with something like this:

    #upfront-region-container-mini-slider .mini-slider .uslide-image {
    height: auto;
    min-height: 175px;
    }

    #upfront-region-container-mini-slider .mini-slider .uslide-image img {
    max-width: 100%;
    }

    Since the image is above text in mobile view we can resize the entire holder and then fit the entire image with that CSS.

    For larger screens, like tablets, where text is still next to image we can’t do the same thing because resizing image holder will misalign it with text box so in that case we can just center the image but leave it cropped with CSS like this:

    #upfront-region-container-mini-slider .mini-slider .uslide-image img {
    position:relative;
    left: -50%;
    }

    Let me know if this works for you.

    Best regards,

    Predrag

  • Wayne
    • The Incredible Code Injector

    Thanks Predrag.

    The code almost worked this is what I ended up using:

    @media screen and (max-width:570px) {
    #upfront-region-container-mini-slider .mini-slider .uslide-image {
    height: auto;
    min-height: 175px;
    }
    #upfront-region-container-mini-slider .mini-slider .uslide-image img {
    max-width: 100%;
    }
    }

    So I didn’t need to use:

    #upfront-region-container-mini-slider .mini-slider .uslide-image img {
    position:relative;
    left: -50%;
    }

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.