Responsive Category View with brick masonry-effect

[manaan]

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:

Code: Select all

#phocagallery img {
	max-width:none;
}

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!

[christine]

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:

Code: Select all

<img src="/xxxx/images/phocagallery/testordner/thumbs/phoca_thumb_m1_xxxxxx.jpg" alt="" class="pg-image img img-responsive img-responsive2">

Which Joomla version are you using? Which template? Could we see it? Thank you.

Kind regards, Christine

[manaan]

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

[christine]

Hi Manaan,

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

Code: Select all

#phocagallery img {
max-width:100%;
}  

Kind regards, Christine