how to move the caption below the image

Hello Marek,

You aren’t using our version of the plugin, it appears to be integrated into your theme. That said, you can use CSS to make some changes. If you can edit the CSS styling on the site, try this:

`
.oy-flex-caption {
bottom: 48px;
}
.oy-flexslider {
padding-bottom: 48px;
}
`

I chose 48px because that’s the height of captions currently and I’m trying to limit the number of code changes, but this could change when the screen rescales.

Thanks David,

I made these changes using a child theme (easier to experiment) but the caption now appears higher up
https://yy3.atwebpages.com/portfolio/celebs/

Am I doing something wrong?

Marek

I tried with this instead:

oy-flex-caption {
bottom: -48px;
}
.oy-flexslider {
padding-bottom: 48px;
}

and it shows now under the image but only the first image, not the rest of them.
Any idea how to fix it?

Just discovered something:
When I minimize and maximize again the browser window then the captions that were not visible at first come up.
Why is this happening??

The slider is constantly calculating the proper size that it should be. The height is based on the height of the image as it loads. When you move to another image or change the browser size, it has to recalculate and redraw the slide.

The problem is that the slide is calculating based on the image, and the caption is hidden by the fact that

It’s not going to be a great fix, but you might be able to test out a solution after trying this and removing the bottom padding:

.oy-flexslider {
overflow: visible;
}

Thanks David,

It looks much better now.

Is there also a way to make the gray caption rectangle as wide as the image? In this case it will have to adjust to different widths of images.

Marek

That’d be difficult, as the image is sized to fit in the slider, without going over the borders. The better thing to do would be to limit the width of the slider to the size of the images, and try to get similarly sized images.

Hi David,

So finally I managed to make proper adjustments so that the captions are just right. You can see how they look on this website https://terrybraunstein.com/portfolio1/ and click on the top-left Portfolio item.

One problem though that came up now is that when the large image of the Portfolio item gets loaded and I click on Next button again and again few times to show next image, then there is an overlapping of images, part of the previous image is visible. Then if you continue clicking on the Next button again and again until you come to the first one and few more times next again, then you cannot proceed any more.

Is this related to your slider plugin?
Any idea how to fix it?

Thanks for any help.

Marek

I’m not able to find the page that you are referring to. Can you link to it directly?

The images are loaded to fit the size of the box, but other things could affect image size, most likely CSS styling, via a plugin or the theme. I can look and see if I can identify the cause on the page.

Thanks David for your quick reply,

In the meantime it turned out to be something else on the website setup that was causing that problem. It’s now solved – I was referring for example to this page https://terrybraunstein.com/portfolio/who-is-she-2013-2014/ where even now you can see some lag when the previous image goes off and the new one comes on, but at least the previous is not anymore ‘stack’ and creating that overlapping issue.

Marek

Glad to hear that you got it worked out. If you can share what the other thing was, it might help if others have a similar problem.

That problem was quite specific to the setup of that website. That site was installed in its own subdirectory but I wanted it to open with the main URL https://terrybraunstein.com. In the root of that main domain was another, older installation. After making some changes in the index.php file and some changes in the data base the overlapping of the images occurred – new image was loaded and the old was still there behind.

Now after moving the old site into a backup directory and moving the new under the root that overlapping is gone, although right now as I’m writing this, the owner of the site has problems with viewing the images in the Portfolio page on her mobile. For example here https://terrybraunstein.com/portfolio/who-is-she-2013-2014/ the images do not appear at all on Samsung mobile using Chrome. She is in US and I’m living in India and I can view these images OK. I’m not sure what this is caused by. Are you able to view on the mobile the images on that page when clicking on the Next button ? It would be very helpful if you can try and let me know. Thanks!

Marek

• This reply was modified 8 years ago by mr108.

OK, all is working properly now on mobile phone as well – it was just a question of clearing the browser cache.