Issues with size of images in slider

Support
#1

Hi,

I’ve got another request. We’re now almost done with the site and this is the last thing I need to look into. And it’s about the slider that comes with your theme. Or first of all my coder has told me that there are 2 sliders that come with your theme but as she said the revolution slider is not compatible with it for some reason. So she’s set up the other one, LayerSlider, but that one seems to have no real options to adjust the size of the images. Which makes it pretty useless on mobile, as you can check for yourself on the site we’re currently working on here: logopaedie.iwebflix.com

On desktops it looks alright, although the main image is still too wide for my taste. It could use a bit more height. But on mobiles we’ve got tons of space vertically and the slider doesn’t use that at all. It stays at this greater than 2:1 format. And the thumbnails below it are barely visible at all. My coder has already reduced the space between them and the main image as before there was a ton of space as well. So something doesn’t seem to be working properly here and I’d appreciate it if you could look into it. And provide us with a solution for how to increase the height of the images, ideally seperately for mobiles and desktops, and how to increase the size of the thumbnails so they actually become visible. My coder doesn’t seem to know how to do that with the slider you’ve provided and as she’s said, your theme seems to have lots of issues with all kinds of plugins. And even the other one you’ve provided doesn’t seem to work at all. So it would be nice if you could provide a solution that doesn’t cause any more problems.

Cheers,
Andreas

#2

Hello Andreas,

Thanks for writing in! This seems not an issue at all. Please be aware that this bundled slider plugins needs to be set up properly and responsively correct to give an an outmost result. Please let your developer check out this documentations and video tutorial instead:

Hope this helps.

#3

Hi Rue,

I’ve sent her the links you’ve provided and hopefully that will solve this problem.

Cheers,
Andreas

#4

Great!
If you need anything else we can help you with, don’t hesitate to open another thread.

#5

Hi,

My coder has checked out the links and they didn’t help her out. What I was looking for was a way to adjust the slider, but from what she’s told me all those links you’ve given us talked about were about how to set it up properly. Which it seems to be and it is responsive, but it’s doing a very poor job at it, making it pretty useless on mobiles. So I was looking for a way to adjust the slider for different devices and resolutions. Or just to make it scale properly for different resolutions. Can you provide any solution for that?

The site I’m talking about can be found at logopaedie.iwebflix.com, so you can check it out for yourself. The main issue is that the thumbnails below the large image are extremely tiny on mobiles, much smaller proportionally than they are on desktops. And that is what I would like to fix. Aside from that I would also like to adjust the height of the main image as it’s an extremely wide format, which makes zero sense to have on mobile devices. So please let me know if there is a way to do that, or if maybe my coder overlooked something. But from what she’s said there’s only a way to set things up for the desktop version and as you can see for yourself that then scales very poorly on mobiles.

Cheers,
Andreas

#6

Hey Andreas,

Regretfully, there is no responsive option for the Navigation Thumbnails so I’d recommend that should be hidden on mobile through the use of custom CSS. It’s tricky to override the size as there’s JS involved displaying the thumbnails. I believe your developer can do this though but for other users who might read this thread, here’s the code to hide the thumbnails starting on portrait tablet screen size.

@media (max-width: 979px) {
    .ls-thumbnail-wrapper {
        display: none;
    }
}

If you don’t like the approach and since our bundled slider can’t achieve what you’re after, feel free to use a different slider.

-----------------------------------------------------------------------------------

Regarding the main image or the Slider Layout, you can change the Canvas Width and Canvas Height under the Layout settings.

Hope that helps.

#7

Hi Christian,

My coder’s councern about using a differnt slider was that whenever she makes some changes to the site there’d be issues caused in connection with your theme. And I’d like to avoid creating any new problems at this point.

So I guess I’ll have to see if getting rid of the thumbnails would be the best option. They’re not responsive at all though? Why are you using it for your theme in that case? That makes it completely useless in my view.

And as for the size adjustment options, what we need is a way to adjust the size for mobile devices separately. I assue that can’t just be fixed with some simple custom code? Even if I get rid of the thumbnails on both desktop and mobile pages and increase the image’s height a bit, it would still be very wide on mobile devices with a vertically held screen. But I guess I’ll have to see how to best go about it.

Cheers,
Andreas

#8

Hi, again Andreas,

Regarding this:

We’d be interested to see if there’s a bug in our theme that could cause issues with other plugins. You can report issues to us.

Yes, hiding the thumbnails would be the best option for your case.

Please bear in mind that though this thumbnail display is not desirable for you, some users might want this type of display. I believe the creators of LayerSlider intended for the thumbnail view on mobile to serve as a navigational guide or a breadcrumb for the slider user and not to serve as a button and source of information as they’re very small.

Though we understand this limitation of LayerSlider, it is a useful plugin. It just depends if it can achieve what you need.

Sorry but there’s no simple custom code.

I understand that you don’t want to use other plugins but I just like you to know that Slider Revolution would be better in this case as you can change the slider’s aspect ratio on different screen sizes.

Hope that helps.

#9

I assume you’ve seen how the thumbnails look on my site on mobile devices. Do you really want to tell me that there might be people who would want to have tiny little thumbnails that you can’t see or click? You’ve already confirmed that it doesn’t scale for some reason, so obviously it’s not working as it should. Or did I misunderstand something?

Also about the revolution slider, I think I’ve already mentioned before that the theme seems to say that it’s incompatible with it when my coder tried to use it. I can ask her for more details if you want, just in case that there’s again some bug involved and it is supposed to work normally. Or you can check it out for yourself if I provide you with login details again. Otherwise I’ve considered using a different slider from the start but haven’t yet for that reason.

#10

Hey Andreas,

I saw the small thumbnails. As a slider user, personally, I will not think of clicking the thumbnails though. I’d rather use the navigation arrows. If the thumbnails are big, a few will display at one time so they are also not useful, honestly. The small thumbnails part is only useful as a guide to see if there are images in the slider left to see.

Officially, the product designers of LayerSlider has not yet thought of adding an option to resize the thumbnail on mobile only. Creating a plugin requires research and testing so although I could not speak for them, I believe that they thought of the same user interaction as I’ve described.

I only recommended hiding the thumbnails on mobile because you asked.

I reviewed my responses above and I didn’t say that the small thumbnail is a bug. My recommendation is just based on what you want to achieve and LayerSlider can’t do what you need.

What exactly does our theme say or what errors did you see? We haven’t received reports of incompatibility between our theme and Slider Revolution. Please open a separate thread for this if it’s not related to the title “Issues with size of images in slider”. I’m just kindly asking as mixing topics in one thread could get confusing and it’s neither good for you nor the support team.

Thanks.

#11

I didn’t say anything about it being a bug either. You’ve said that it’s functioning normally as it should, even though that is to not scale at all for mobile devices. That makes no sense to me but as you’ve said it’s not a bug, so nothing to do about it.

And I’ve already asked my coder for more details on this, so I will get back to you when she replies back. And I will create another thread if you prefer it that way.

#12

Hi @spektukal,

Have you checked the Thumbnail dimensions options? I have just tested it on my dev site and it works for resizing the thumbnail.


Couple of things to note about this options, because the slider is set to responsive the value you set there is not the exact size of the thumbnail it’s more of a base size (it will respond accordingly in desktop and mobile), please play with this settings together with the Thumbnail container width and see where do you want this value to be.

Do not set this thumbnail too big as it will overflow to its container and will look a slider on its own (unless this is how you want the thumbnails to be).

Yes please, as this one is getting longer and hard to follow.

Have a nice day,
Cheers!

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.