Pictures in Slider Remain Cropped Even Out of Responsive Mode

I wanted to crop the pictures in the home page slider in the responsive mode to better fit phones. It changed the size even in the non-responsive mode and now I can't get them back to the way they were.
Help!!
Thanks.

  • Joe

    While I'd love to know what I did--or didn't do--I just deleted the slider and re-did it.

    I guess I misunderstand editing in the responsive mode. I thought if I made changes for the smart phone size, those changes would just be seen there, not in the full size as well.
    What are your suggestions for dealing with the pictures in the slider? Making the element smaller didn't seem to change the fact that the pictures were being cropped.

    As always, thanks.

  • Adam Czajczyk

    Hello Joe,

    I hope you're having a nice day!

    You're right about making changed in "responsive mode": these should only be applied to the selected device. There are however some elements that work better used other way. That said, I think the simplest way to deal with a slider is to start with "desktop" (default) mode and then:

    - place the slider element on page
    - adjust its position and size as necessary (to suit the design)
    - if needed, re-assign images (sometimes those get "pixelated" while resizing but that's something I just noticed and haven't yet found a pattern of "when and why")
    - these images should be as big as necessary to look good in "full page" mode

    There should now be no need to change images as slider aims to be responsive and when displayed on devices with smaller screens it adjusts it size and tried to adjust images accordingly.

    Having said that, I think if images (those "original" ones) doesn't work well on smaller screens, there'll be again some CSS needed. What I'm trying to say is that you should be able to easily adjust slider's position and size in responsive mode for selected devices (and these settings should be maintained properly) but changing images will change them for "entire" slider, regardless of the screen size. Therefore, it's better to "hook up" to CSS media queries for smaller devices and adjust image size with CSS.

    In case you'd need more help with this, please point me to the slider in question and give a bit more description on what aspects of the image should be adjusted. I'll be glad to assist!

    Best regards,
    Adam

  • Adam Czajczyk

    Hello Joe,

    Thank you for your response.

    I've investigated it again using my own test setup and it seems that indeed these images are not re-scaled/cropped properly. My suggestion as a workaround would be to follow this steps:

    1. Fill slider with images using "desktop" mode, putting there images of the size that would nicely fit the slider size (let's say, full-width)
    2. Give this CSS trick a try by adding this code via "Upfront left panel -> Theme Settings -> add custom css rules" editor:

    .uslide-image {
    	overflow:hidden;
    	display:table-cell;
    }
    
    /* Set the image to fill its parent and make transparent */
    .uslide-image img {
    	width:100%!important;
      margin:auto!important;
    }

    Surely that's not the best solution but it seems to re-scale and center images. The only downside of this is that for smaller screens an additional "whitespace" appears around slides. I think though it makes slider look better after all.

    That said, I can confirm that the issue has already been passed on to Upfront developers and they're working on a permanent fix. I hope this should be release anytime soon with one of upcoming updates.

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.