Phoca Forum

Hello

First off i want to tell you how greatful I am that you developed this piece of software. Thank you for that.

My site uses the category view with the "brick masonry"-effect and I cant find a way to let the images resize on small screens. The responsible declaration seems to be: The path to this file leads to the folder that contains the images of that category but there isn't actually any file.
I don't know if this only occurs in conjunction with the "brick masonry"-effect, but I can't override this declaration through any other CSS file.
Is there any way to override this declaration?

Thanks in advance!

Hi manaan,

I checked Demo: https://www.phoca.cz/joomla3demo/category/4-dog and my test-site with masonry effect.
Both URLs do have your above code. There was/is no need to change it. Both URLs will resize accordingly.

Did you make according this procedure: https://www.phoca.cz/documents/2-phoca-g ... -demo-site
in addition: On my test-site I have: General Settings > Responsive Design: Yes. Current Theme: Responsive PG 4
CSS: Bootstrap.min.css > de-actived.

The code is ca. in this way: Which Joomla version are you using? Which template? Could we see it? Thank you.

Kind regards, Christine

Hello Christine,

I'm using the latest version of Joomla 3.6.4 with the "purity iii"-template.
In Phoca Gallery I'm using the same Theme: Responsive PG 4 with the Responsive Design: Yes.
On the detail view I use maginific (Image only) which works as intended.

The <img> code is exactly like yours.
The biggest difference to the demo is, that I want the thumbnail size to be 370x300. If a user has a screen resolution of 360x600 the image width is larger than the screen width and you have to scroll horizontally. So I want to set "max-width: 100%" for the images to scale down in this situations.
I just don't understand where the declaration "max-width: none" is set, that I can not override through any other CSS file. I don't think there is another way to downscale the images.

Kind regards, manaan

Hi Manaan,

then try following: Put below code at the end of your template.css (custom.css) ....
Kind regards, Christine