Hi all. I am using the built-in Elements slider on a web page. On desktop it displays fine but on mobile, it is tiny (see provided photos). I’ve been through the settings for the slider and its container but can’t find anything that will fix it. And advice would be appreciated. Thank you.
there is no responsive control for different screen sizes for the images as far as I can see, you could take a look at this post New Image Slider and the project I show
I suppose the laws of physics apply. Reducing width with same size boxes, they will be wider than the available width unless they shrink, or you reduce the number
Could really do with a blue dot re number of images
In Gallery you have control on the number of columns
While you can’t alter the number of slides, you can alter the design at different breakpoints.
Your button size, shadows, and spacing could all get smaller to make it work better on Mobile. maybe that would work for you?
Thanks, Dan. I tried reducing the number of slides visible at once but it made the slides huge which looked terrible on desktop.
You need to make 3-4 image sliders.
This is a site I did in classic. The news slider on the homepage at the bottom shows multiple images on desktop and one on mobile. Just want the same in Elements if possible.
Have a look at the slider on this test page - https://www.test.blackrockq.com/book/
I have set it for three images on desktop and one on mobile and two inbetween. I only knocked this up yesterday after the advice above. I think this is what you are kind of after?
I might now replace all the galleries on that site with sliders because the photos turn out larger on mobile. In fact, on a mobile the photos in the gallery are the same size as the thumbnails - turn it landscape and they are actually smaller than the thumbnails.
EDIT - Have updated the site since posting the link above so it now has a slider one image wide on mobile and a gallery on larger screens.
1 Like
I suppose that’s my only option. I liked the larger number of images on the desktop version, but to make it look good on mobile, this is gonna be my only option in Elements. Here’s hoping the Elements slider can eventually function like the one I used in Classic.
Appreciate you taking the time to reply.
I am playing around with it just now. Because you can hide things at certain breakpoints I think I will end up going with a slider on mobile and a gallery on desktop to get the best out of both options.
Sounds like a good workaround. How it looks now on mobile, www.astraeamarketing.com, just isn’t great. I may just remove the slider and just do a couple rows of static images for now.
work around, the project above does this, on mobile you could set 1 image if you wanted and change the number on the other screens, changes size of arrows etc. until the slider has blue dots?
That looks great. Exactly how I want it to work on my site.
just download and adjust
there is a different container/slider for each screen size so only change the slider for each corresponding screen size
really could do with blue dot in the slide image number
Thanks, Steve. Will download and play around with it in the morning.
Yeah I’ve been using RW for years and I’m still muddling my way through figuring out everything in Elements. This was my first from scratch Elements site. Any suggestions for how to get the menu to display properly on the iPad? I set the mobile trigger to what should have displayed the three lines for the menu but it’s not working.
really nice site, looks great, nt sure how you set your menu up
Thanks, Steve. Ignore my question in my last reply about how to fix the nav on iPad. I just changed the setting for the menu trigger to up to extra large screens and that fixed it for now. I just watched Dan’s video on tree menus and I think I am going to give that a try so I can combine a few menu items as drop downs to help reduce the overall width of the menu itself. Then I can show the actual menu on medium screens like iPads without having to resort to the mobile trigger.
1 Like
Looking good now 