Two columns instead of three in the masonry grid in the Cassiopeia template
-
- Phoca Member
- Posts: 18
- Joined: 29 May 2024, 03:02
Two columns instead of three in the masonry grid in the Cassiopeia template
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.
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
- Phoca Hero
- Posts: 48303
- Joined: 10 Nov 2007, 18:23
- Location: Czech Republic
- Contact:
Re: Two columns instead of three in the masonry grid in the Cassiopeia template
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
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
If you find Phoca extensions useful, please support the project
-
- Phoca Member
- Posts: 18
- Joined: 29 May 2024, 03:02
Re: Two columns instead of three in the masonry grid in the Cassiopeia template
Hi,
/media/plg_content_phocagallery/css/phocagallery-masonry.css
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.
/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;
}
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.
-
- Phoca Member
- Posts: 18
- Joined: 29 May 2024, 03:02
Re: Two columns instead of three in the masonry grid in the Cassiopeia template
The same thing happens in the gallery
/media/com_phocagallery/css/misc/phocagallery-masonry.css
1,2,4,5 columns are displayed, but not 3.
/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;
}
-
- Phoca Member
- Posts: 18
- Joined: 29 May 2024, 03:02
Re: Two columns instead of three in the masonry grid in the Cassiopeia template
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.
The result is the same column-count: 3 does not work with the Cassiopeia template.
-
- Phoca Member
- Posts: 18
- Joined: 29 May 2024, 03:02
Re: Two columns instead of three in the masonry grid in the Cassiopeia template
/media/plg_content_phocagallery/css/phocagallery-masonry.css
If I comment out these 4 lines, then the gallery is arranged in 3 columns.
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;
}
}
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;
}
-
- Phoca Member
- Posts: 18
- Joined: 29 May 2024, 03:02
Re: Two columns instead of three in the masonry grid in the Cassiopeia template
This does not work with Phoca Gallery Plugin.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; }
-
- Phoca Hero
- Posts: 2802
- Joined: 28 Nov 2010, 17:20
Re: Two columns instead of three in the masonry grid in the Cassiopeia template
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
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
-
- Phoca Member
- Posts: 18
- Joined: 29 May 2024, 03:02
Re: Two columns instead of three in the masonry grid in the Cassiopeia template
Hello, thanks for the reply.christine wrote: ↑31 May 2024, 17:40 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
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.
-
- Phoca Member
- Posts: 18
- Joined: 29 May 2024, 03:02
Re: Two columns instead of three in the masonry grid in the Cassiopeia template
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
I disabled all the modules, but nothing changed, the thumbnails became a little larger.
https://imgur.com/a/fiTlMUu