Slideshowplugin ist not responsiv?

Phoca Gallery - image gallery extension
westerweb
Phoca Member
Phoca Member
Posts: 11
Joined: 21 Aug 2019, 09:54

Slideshowplugin ist not responsiv?

Post by westerweb »

when I test my slideshow on mobile the background of the image remains at height 480px. In my webmaster tools I found the code:
<div class="phocagalleryslideshow" style="width:100%px;height:480px;padding:0;margin: auto;">
There two errors:
100%px sounds strange (ehm)
height: 480px

Where do the 480px come from? Height should left out or set to auto to make it possible to display images with differnet sizes as well as portait or landscape ...

Does anyone knows help??

Regards wolfgang
christine
Phoca Hero
Phoca Hero
Posts: 2725
Joined: 28 Nov 2010, 17:20

Re: Slideshowplugin ist not responsiv?

Post by christine »

Hi Wolfgang,

do you mean this plugin? https://www.phoca.cz/documents/19-phoca ... how-plugin

Could we see it please, where it occurs?

Kind regards
Christine
westerweb
Phoca Member
Phoca Member
Posts: 11
Joined: 21 Aug 2019, 09:54

Re: Slideshowplugin ist not responsiv?

Post by westerweb »

Is it possible to send Hardcopies?
christine
Phoca Hero
Phoca Hero
Posts: 2725
Joined: 28 Nov 2010, 17:20

Re: Slideshowplugin ist not responsiv?

Post by christine »

Hi,

in principle yes: https://www.phoca.cz/documents/50-phoca ... forum-post

Kind regards
Christine
westerweb
Phoca Member
Phoca Member
Posts: 11
Joined: 21 Aug 2019, 09:54

Re: Slideshowplugin ist not responsiv?

Post by westerweb »

The imgur verification !"§$%&
so I try to describe my problem.
I use JOOMLA 3.9 with PHOCA Gallery an slideshow plug.
On my startpage I installed a slideshow with: {pgslideshow id=9|width=100%|delay=4000|image=L}
It works fine on a PC with 1920x1440
When I switch to mobile mode (firefox) the slideshow foto is well resized, but the div which contains the foro stays at 480px with background-color white.
I should automatically adjust to the images height.
This also leads to a problem when images are not absolutely same size. If the second is smaller than the first image you can see the first image below.
In my webmaster tools I found the code:
<div class="phocagalleryslideshow" style="width:100%px;height:480px;padding:0;margin: auto;">
I dont know where the 480px come from nor the width: 100%px

Regards
Wolfgang
christine
Phoca Hero
Phoca Hero
Posts: 2725
Joined: 28 Nov 2010, 17:20

Re: Slideshowplugin ist not responsiv?

Post by christine »

Hi Wolfgang,

I think, the 480px; comes from the origin image height.
The: width: 100%px from here: {pgslideshow id=9|width=100%|delay=4000|image=L} > remove the: %.
And/or change the width e.g. to: width=300

Kind regards
Christine
westerweb
Phoca Member
Phoca Member
Posts: 11
Joined: 21 Aug 2019, 09:54

Re: Slideshowplugin ist not responsiv?

Post by westerweb »

Do you think the plugin does not understand 100% ????

When I set them to 910 ( size in px) they are CUT in mobile mode !!!
Thats not really responsive ...
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 47810
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Slideshowplugin ist not responsiv?

Post by Jan »

Hi, the width can be only added as PX in this slideshow plugin.

Jan
If you find Phoca extensions useful, please support the project
christine
Phoca Hero
Phoca Hero
Posts: 2725
Joined: 28 Nov 2010, 17:20

Re: Slideshowplugin ist not responsiv?

Post by christine »

Hi,

for mobile: Put following into your user.css, or template.css etc. Depends which template you are using:
div.phocagalleryslideshow {
max-width:100%;
}
@Jan: concerning the white background, this belongs to: .gallerylayer. Can't remove this.

Kind regards
Christine
westerweb
Phoca Member
Phoca Member
Posts: 11
Joined: 21 Aug 2019, 09:54

Re: Slideshowplugin ist not responsiv?

Post by westerweb »

Now: {pgslideshow id=9|width=910|delay=4000|image=L}
Again:
When I set them to 910 ( size in px) the images are CUT in mobile mode !!!
Thats not really responsive ...

Adding the following in /templates/phoca_photography/css/template.css did not change anything
div.phocagalleryslideshow {
max-width:100%;
}
Post Reply