Page 1 of 2
Two columns instead of three in the masonry grid in the Cassiopeia template
Posted: 29 May 2024, 18:30
by 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.
Re: Two columns instead of three in the masonry grid in the Cassiopeia template
Posted: 29 May 2024, 18:35
by 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
Re: Two columns instead of three in the masonry grid in the Cassiopeia template
Posted: 31 May 2024, 03:50
by 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.
Re: Two columns instead of three in the masonry grid in the Cassiopeia template
Posted: 31 May 2024, 04:35
by 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.
Re: Two columns instead of three in the masonry grid in the Cassiopeia template
Posted: 31 May 2024, 07:31
by 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.
Re: Two columns instead of three in the masonry grid in the Cassiopeia template
Posted: 31 May 2024, 08:00
by 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;
}
Re: Two columns instead of three in the masonry grid in the Cassiopeia template
Posted: 31 May 2024, 09:01
by Opendreas
Opendreas wrote: ↑31 May 2024, 08:00
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.
Re: Two columns instead of three in the masonry grid in the Cassiopeia template
Posted: 31 May 2024, 17:40
by 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
Re: Two columns instead of three in the masonry grid in the Cassiopeia template
Posted: 31 May 2024, 22:09
by Opendreas
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.
Re: Two columns instead of three in the masonry grid in the Cassiopeia template
Posted: 03 Jun 2024, 15:12
by 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