I have a slideshow template where the presentation target is set to “expanded”.
The controls of the slide show were set to “inside”, because when viewing on a notebook or large monitor and expanding the slideshow to full screen view, the images are nicely centered vertically and the controls disappear like the arrows. It just looks very clean and nice.
Now I realized, that on an iPhone 7, when the controls are set to inside, they are partly inside the image and that looks horrible and they don’t disappear like they do on a laptop size screen. Why? Doesn’t make sense to me that they are visible all the time?
Now I changed the controls of the template to “outside”, so that they don’t overlap my images. That is fine for the iPhone 7 view, since they do not overlap the image now.
But on a big screen, when going into full screen mode I don’t like it since the image is not centered vertically and the controls are always visible. Johnny Ive wouldn’t like that either, since it is not clean;-)
Why when set to “inside” do the controls not disappear on an iPhone 7 screen like they do on a laptop size screen? Doesn’t make sense to me that it behaves differently.
When set to “outside”, why are they always visible and don’t disappear like they do when set to “inside”.
Is there a way by css to force the controls to be “outside” only when displayed on a small screen size? That would solve my problem.
Help is greatly appreciated.
which slideshow are you using?
I am using Pangolin Galleria.
That is the link to the set page, if that helps:
Some have dark background and are still set to inside.
The ones with white background are set to outside
I think that’s just the way Galleria works.
You could try setting the button backgrounds to transparent. At least that’s not too distracting.
Well, they still overlap the image on a tiny screen, which just doesn’t look professional. I guess I will have to settle with “outside”.
There is a lot of empty space above the images until the control elements show that I am trying to get rid off. I changed “margin top” and “negative space” both to 0, but that doesn’t do anything? How can I reduce that space?
That space is the container for the controls. The only way I know of to remove that space is to set the controls to “inside.”
I figured out what moved all my images down and made the space above the image so large. I had the following on, which wasn’t on before:
“Force Use of Client Height”
Use this in full-screen layouts to force vertical centering of images on iOS devices.
So putting this to on for iOS devices seems to also affects the image position in the browser window on a normal iMac screen.
It shouldn’t though, should it?
One other thing in galleria slideshow: When I set the arrow colors both for fore- and background to transparent, I still have white arrows show up. On a scaled down browser window they show up over my starting image when you first enter the homepage which doesn’t look so nice. Also when the mouse is moved, the arrows appear every time.
The controls all can be set to off and it would be great to have that for the arrows as well, since they are not transparent when transparent is selected as color.
Is there no way do get rid of the arrows in a galleria slide show and let it play like in a kiosk mode?
setting the arrows to transparent works for me.
Try clearing template cache (Backlight > Admin > Special links),