images cut in half

[Archivarius]

Hi,
Phoca Gallery Slideshow Plugin had worked for some time fine. But suddenly images shown moved up so they became cut in half.
Any ideas what went wrong and how to fix it?

Examples are here:
http://bahaiarc.org/93-service/1263-community
or here:
http://bahaiarc.org/about-bahai-faith/b ... h?start=5

[Jan]

Hi, do you get this with different Popup Method. Which version of Phoca Gallery do you use? Where there some changes in template, maybe there is some conflict between the gallery and template.

Jan

[Archivarius]

Thanks for getting back to me!
Do I get this with different Popup Method?
- Yes. I’ve just changed from Highslide JS to Standard Popup Window to check. And it is still the same. I’ll keep it for a while so you can see for yourself.
Phoca Gallery version is 4.3.10.
As for template I don’t know. It might have undergone some updates. I don’t know how to check it and to find out if there is a conflict with it.

Any ideas what to do?

[Jan]

Hi, it is easy to test if the problem can be related to template, just switch to standard template for test only so you will see if you get the same problem there

Jan

[Archivarius]

Thank you!
I’ve checked with all available standard templates. Here are results:
It has same problem with templates Beez2, beez3, Beez5. But it works fine with templates protostar and Atomic. So, I guess, with your help here we now know for sure that the problem is conflict between the gallery and template.
Any advice on what to do with it? Maybe here on the forum you helped somebody with similar problem?

[Jan]

Hi, unfortunately, there is no easy step to find the problem. You should do different steps until you will find the place where the conflict occurs

1) try to disable/enable different CSS on your site (e.g. in Google web developer tool) to find with CSS is in conflict
2) if you will find such CSS, try to disable different classes to find which part can be in conflict (mostly you select the problematic part to see the classes which influence this part and you will try to disable them step by step)



Jan

[Archivarius]

Thank you! You gave me a road map. I appreciate it very much!

[christine]

Hi,

I saw an Inline segment. Don't know where it comes from:

Code: Select all

.pg-detail-view {
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
}

After inserting temporarily following Code at the end of template.css:

Code: Select all

.pg-detail-view {
    position: relative;
    top: 50%;
    transform: none;
}

it looks OK. Just give it a try.

Kind regards
Christine

[Archivarius]

Christine,

It took us a while to implement your solution but at the end it worked fine! Thank you very much for your assistance!

[christine]

Thanks for feedback.
Kind regards
Christine