[Pro] title & caption covers slide picture

Exhibeo
1

When viewing the Exhibeo galleries from my services page on a mobile the title & caption of the photo covers the photo.
Thoughts please.
Bests Sarah

http://www.sarahspainting.co.uk/services.html

Exhibeo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Which Exhibeo theme are you using?

David

Exhibeo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

focus and exporting it to pro 7

Exhibeo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

I’m getting the same problem (also using Focus theme and latest version of Freeway Pro).
I’d like the title and caption text to drop down below the photo if possible.

Exhibeo mailing list
email@hidden
Update your subscriptions at:

5

I’d like the title and caption text to drop down below the photo if possible.

Without seeing your example page I can only make an educated guess that something like the following should do the trick.

<style type="text/css">
.image-focus-image figcaption { bottom: -75px !important; }
</style>

Added via Page>Html Markup in the before end slot

David

Exhibeo mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

6

Hi David

here is a link to the page:

You will need to view on a mobile to see what I mean about the text running over the images (when you click on one of the images to bring up the slideshow).

On a desktop it’s okays the text only comes up when you hover over the image; on mobile and tablet you don’t have that option.

Thanks
tim

Exhibeo mailing list
email@hidden
Update your subscriptions at:

7

on mobile and tablet you don’t have that option.

Because hover is not supported on Mobile.

So what do you want to do with the text on those devices? Hide it?

D

Exhibeo mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

8

Ideally I’d like it to sit below the photo.

Failing that, I’d like to hide it.

Exhibeo mailing list
email@hidden
Update your subscriptions at:

9

The problem is that the amount of offset required (bottom: -75px) will be different depending on how much text you have in your captions. One setting will not suit all.

So unless you limit the amount of text in the caption the best way would probably be to hide the caption on smaller width devices.

Something like

<style type="text/css">
@media only screen and (max-device-width:768px) {
 figcaption { display: none; }
	}
</style>

But I think it looks fine on iPad portrait so maybe reduce that 768 to 667 (iPhone6 landscape size)

D

Exhibeo mailing list
email@hidden
Update your subscriptions at:

10

Thanks, David

I think I’ll opt to hide the text at mobile widths.

Where do I insert the script? I tried at Page>Html Markup in the before slot but that didn’t make any difference.

Exhibeo mailing list
email@hidden
Update your subscriptions at:

11

One setting will work if relative measurements;

<style type="text/css">
.image-focus-image figcaption { bottom: -100% !important; }
</style>

This will place the caption below the image regardless of the height of the image so the caption will always be below it. Obviously you still run into issues with the caption clashing with the navigation or simply overflowing over the viewable screen area so hiding the caption on smaller screens is possibly the easiest thing to do here.
Regards,
Tim.

On 1 Dec 2015, at 21:58, DeltaDave email@hidden wrote:

The problem is that the amount of offset required (bottom: -75px) will be different depending on how much text you have in your captions. One setting will not suit all.

Exhibeo mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

12

Thanks for that, Tim.

I think I’ll stick with hiding the caption on mobile screens. Just need to confirm the procedure.

Exhibeo mailing list
email@hidden
Update your subscriptions at:

13

Hi Tim,
As Dave mentioned touch screen devices won’t show the captions anyway as they don’t have any concept of hovering over an element. If you test your gallery on a phone or tablet you’ll see that the captions don’t show. I suspect you are testing your site on a desktop browser which does support hover events and therefore shows the captions.
Regards,
Tim.

On 2 Dec 2015, at 14:22, Tim email@hidden wrote:

I think I’ll stick with hiding the caption on mobile screens. Just need to confirm the procedure.

Exhibeo mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

14

When I view it on my mobile (Android) the captions are there

Exhibeo mailing list
email@hidden
Update your subscriptions at:

15

Hi Tim,
They shouldn’t be. I tested it on my Android (Lollipop) phone before I send my last email and the captions weren’t shown.

Regardless of this you can use the code Dave suggested earlier to hide the captions from all devices based on the screen width of the browser;

<style type="text/css">
@media only screen and (max-device-width:768px) {
figcaption { display: none; }
	}
</style>

Change the 768 number to the largest device width you want the captions hidden on and paste the code into your page using the Page > HTML Markup > Before option.
Regards,
Tim.

On 2 Dec 2015, at 14:53, Tim email@hidden wrote:

When I view it on my mobile (Android) the captions are there

Exhibeo mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

16

Thanks. I’ve just checked again on my mobile and what seems to be happening is that the captions will disappear if I tap a different part of the screen. BUT not on all of them. Is there some sort of time delay do you reckon?
I feel like I’m almost there…

Exhibeo mailing list
email@hidden
Update your subscriptions at:

17

I’ve just tried your page again on my phone and none of the captions appear wherever I click. It could be the browser you are using (I’m using the stock Android Chrome) interpreting the hover styles (the CSS that shows the captions) and displaying them on a long press or other gesture. If you’ve added the CSS I previously mentioned then the captions should be hidden on all devices below the specified screen size regardless of where you press and for how long. Essentially the code simply says “if the screen is smaller than this then hide these elements”.

Change that CSS code I mentioned before for this;

<style type="text/css">
@media screen and (max-width:667px)
{
	figcaption { display: none !important; }
}
</style>

There were a couple of errors in there that caused the style to be ignored.
Regards,
Tim.

On 2 Dec 2015, at 16:07, Tim email@hidden wrote:

Thanks. I’ve just checked again on my mobile and what seems to be happening is that the captions will disappear if I tap a different part of the screen. BUT not on all of them. Is there some sort of time delay do you reckon?
I feel like I’m almost there…

Exhibeo mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

18

Thanks, Tim. That’s much better. It now works on all my browsers.

Thanks very much for all your help - it’s much appreciated!!

Tim

Exhibeo mailing list
email@hidden
Update your subscriptions at: