Slider responsive issue

Slider elements doesn't load slider image responsively, for different sized images. I've tried to set photos to fit but they don't end up that way. Tried adding the following CSS as a workaround, however it doesn't help much:

div.uslide-image img {
margin: 0;
max-width: 100%;
max-height: 100%;
}
  • Katya Tsihotska

    Hi Adam

    Hope you're having a good weekend!

    I've checked your site, and I see that you're using another slider now. With regards to this, I can't see your issue and not able to have a clear understanding of it. Would you mind to set a test page and replicate the issue with the native Upfront slider on this page? So I'll be able to have a closer look and further investigate this issue.

    Let us know when it'll be done and please, tell us the title of the test page.

    KInd regards,
    Katya

  • Adam

    Yeah sorry. I should have thought of that.

    You can monkey around with http://my.littlefyr.com/omasaromas/testing-slider/

    I've shot a screencast (https://youtu.be/ejvVrU3aNig) of me building the page, and then showing the results of what I've done (which is add a bunch of images, and set each one to 'fit'.

    Now the CSS fix noted above came from your support team (Nithin) and it gives the result you see there, namely that the images are stretched to fill the whole space. The reason is that something is giving the image tags an inline style with min-height:100%; min-width:100% which combined with the equivalent max height and width is the same as setting the height and width to 100%. Without it you just get way too big images.

    In the screencast I run through removing the min height and width to show what I want aspect ratio wise.

    I'm not sure what the issue is but I suspect that the "crop" feature isn't really working. I've never had much problem with it in simple image draggable element (until you resize, its an understandable pain) so I don't know what it is. However, I suspect that arbitrary scale/crop is less likely than simply fill/fit tied to one of the nine points. I've built a little fiddle that shows a CSS3 approach to the issue https://jsfiddle.net/littlefyr/rf2yfkc2/. Only the next version of IE supports that syntax (and all other modern browsers should support it) but there is a poly fill, or you could do it with background images.

  • Katya Tsihotska

    Hi Adam

    Thank you for the detailed explanation, it's really clear for me now. It looks like the issue occurs only for the "Fit" option.

    As I was able to replicate this I'm marking it as a bug and sending the report to the developers so they will provide a new version of the theme or a hotfix.

    Please keep in mind, our developers work around the clock and they have to deal with lots of critical issues and other things. So it may take a little while for them to check this and release a fix. I appreciate your patience!

    Have a wonderful day!
    Katya

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.