Two columns instead of three in the masonry grid in the Cassiopeia template

[Opendreas]

PHP 8.3
Joomla 5.1.1
Phoca Gallery 5.0
Phoca Gallery Plugin 5.0 (There is no download link on the site)
Phoca Gallery Button Plugin 4.5.2
Template: Cassiopeia

I'm using Cassiopeia with the menu modules on the left. When inserting a category into an article with masonry grid, only 2 columns are displayed instead of 3.
https://imgur.com/a/LX48DF9

The thumbnail size is 301 pixels and the distance between thumbnails is another 16.5 pixels. It turns out that there are a few pixels missing for three thumbnails.
I tried setting the template to fluid, but the thumbnails get bigger and there are only 2 columns.
How can I fix this and set the size of the displayed thumbnails. If I understand correctly, then somewhere in the styles.

Thank you.

[Jan]

Hi, thank you for the info, I have added the missing link to download.

If the images do not fit into the content, the only way is to resize them:

- either the image itself
- or somehow per CSS

Jan

[Opendreas]

Hi,

/media/plg_content_phocagallery/css/phocagallery-masonry.css

Code: Select all

@media only screen and (min-width: 1201px) {
    .pg-masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
	}

If I change this value to 1, 4, 5, 6 and so on, then the corresponding number of columns is created, but 3 columns does not work.
I changed the column count to 3 throughout the code, added “!important”, but there was no reaction, the columns are still 2 and I still can’t understand why.

[Opendreas]

The same thing happens in the gallery

/media/com_phocagallery/css/misc/phocagallery-masonry.css

Code: Select all

@media only screen and (min-width: 1201px) {
    .pg-masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
	}

1,2,4,5 columns are displayed, but not 3.

[Opendreas]

I installed Joomla 5.1.1, Phoca Gallery 5.0 and only enabled Masonry Layout in Category View, no other changes.
The result is the same column-count: 3 does not work with the Cassiopeia template.

[Opendreas]

/media/plg_content_phocagallery/css/phocagallery-masonry.css

Code: Select all

/* Masonry Gallery */
.pg-masonry {
    -webkit-column-count: 3;
	-moz-column-count:3;
	column-count: 3;
	-webkit-column-gap: 1em;
	-moz-column-gap: 1em;
	column-gap: 1em;
	margin: 1.5em;
    padding: 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
    font-size: .85em;
}

.pg-masonry figure {
	margin: 0;
	padding: 0;
	line-height: 1;
}

.pg-masonry-item {
    display: inline-block;
    background: #fff;
    padding: 0;
    margin: 0 0 1.5em;
    width: 100%;
	-webkit-transition:1s ease all;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.pg-masonry-item img{max-width:100%;}



@media only screen and (max-width: 320px) {
    .pg-masonry {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
	}
}
@media only screen and (min-width: 321px) and (max-width: 768px){
    .pg-masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
	}
}
@media only screen and (min-width: 769px) and (max-width: 1200px){
    .pg-masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
	}
}
@media only screen and (min-width: 1201px) {
    .pg-masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
	}
}

If I comment out these 4 lines, then the gallery is arranged in 3 columns.

Code: Select all

.pg-masonry-item {
 /* display: inline-block;
    background: #fff;
    padding: 0;
    margin: 0 0 1.5em; */
    width: 100%;
	-webkit-transition:1s ease all;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

[Opendreas]

If I comment out these 4 lines, then the gallery is arranged in 3 columns.

Code: Select all

.pg-masonry-item {
 /* display: inline-block;
    background: #fff;
    padding: 0;
    margin: 0 0 1.5em; */
    width: 100%;
	-webkit-transition:1s ease all;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

This does not work with Phoca Gallery Plugin.

[christine]

Hi,

You could compare the codes with these:
https://www.phoca.cz/demo/phoca-gallery ... mo-masonry

In the demo, the images are 248px wide.

If you change/add codes, please always enter them in the user.css.

Otherwise, we can say more when we see it live.

Kind regards
Christine

[Opendreas]

Hi,

You could compare the codes with these:
https://www.phoca.cz/demo/phoca-gallery ... mo-masonry

In the demo, the images are 248px wide.

If you change/add codes, please always enter them in the user.css.

Otherwise, we can say more when we see it live.

Kind regards
Christine

Hello, thanks for the reply.
Unfortunately, I do not have the rights to send you a private message with a link to the site. But this is an installation of Joomla and Phoca Gallery without any changes, only Masonry Grid is activated. You don't even have to install the Phoca Gallery Plugin to see the problem.
The code on the demo page looks similar to me. My thumbnails are 300 pixels wide, I didn’t change the thumbnail settings. When I change the column count to 4 in Firefox Inspektor the thumbnails become 219 pixels wide.

[Opendreas]

I installed Joomla 4.4.5 and tried Phoca Gallery 4.5.5 and 5.0.0 with Masonry Grid, same result, 3 column photos are not displayed with Cassiopeia.

I disabled all the modules, but nothing changed, the thumbnails became a little larger.
https://imgur.com/a/fiTlMUu