Hi @iconphotoco
I have tested the CSS code we shared with you earlier and it does seem to work.
You do not need to hire a developer for this since you already have the correct code that will work. All you’ll now need to do is to add it to your site so that it can style that gallery to your specifications.
To do so, simply copy the code snippet as it is and go to the Edit page of that particular gallery that you want the code to affect, and if you scroll down past the Gallery Settings section, you’ll see the “Custom CSS” section. Paste the code snippet as it is on the text box below it and save. You can also paste it to your theme’s style.css file or custom CSS/additional CSS area.
Here’s the CSS code to add:
.foogallery#foogallery-gallery-1480{
max-width: 1120px;
}
@media only screen and (max-width: 1120px) {
.foogallery.fg-default .fg-item {
margin: 10px !important; /* Change the gutter size */
/* Change the width so two columns are displayed.
The 20px value is the gutter multiplied by 2
as it is displayed on the left and right of the item. */
width: calc(50% – 20px) !important;
min-width: calc(50% – 20px) !important;
max-width: calc(50% – 20px) !important;
}
}
@media only screen and (max-width: 768px) {
.foogallery.fg-default .fg-item {
margin: 0 !important;
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
}
}
Hope this helps. However, if you still feel like you need to hire a developer to assist you with this, then you can do so at a god rate at platforms such as Upwork.
Thanks.
Kind regards,
Elvis.
@iconphotoco just a note that in the next release, we have built in a setting to choose the number of columns on mobile. It should be available in the next couple of days
If you want to test it out sooner, let me know and I can send you the zip
@iconphotoco having said the above, our new setting only fulfills 1 out of your 3 requirements so you might still need to write some custom code
@bradvin–While 3, 2, and 1 columns as screen sizes decrease would be ideal, I am okay with having two columns on wider screens and one column on mobile.
I’d love to try the next release, please send the zip.
Also, an odd thing is happening now in my galleries where, when I add new images they appear as the first images in the gallery no matter how many times I move them or delete and re-add. Is this a bug you’ve seen before?
@iconphotoco
The beta can be downloaded here : https://we.tl/t-csFo6ttHpB
But the new setting for mobile layout only allows you to set the number of columns at mobile size, so I am not sure it will work for your scenario.
What width are your thumbs set to?
@bradvin I will try the beta.
I think i’ll be good if I can set the columns to 1 for mobile and leave all larger screens set to 2 columns.
My thumbs are set to 900px. What do you recommend?
If you want to show 2 columns, then I suggest you make your thumbs smaller.
2 columns = 1800px without margins etc. Which is very large and based on your theme it will likely show 1 column for most visitors.
You can also try the masonry template with 2 column layout
@bradvin Sorry to be such a pain in the ass.
I wasn’t able to try the beta you shared before the link expired. Today I updated to the latest version of foogallery in hopes of finding the “choose number of columns for mobile” option but I’m not seeing it. Where do I look?
Also, @elviiso, the custom code is still not working for me. Instead of monkeying with my live galleries I’m experimenting on a test page:
https://datingphoto.co/test/
I have the gallery set to Masonry: 2 columns (column width 500)
gallery is #foogallery-gallery-1505
This is the code I’ve pasted into “Custom CSS”. The only change I made from your code was changing the gallery name to 1505.
.foogallery#foogallery-gallery-1505 {
max-width: 1120px;
}
@media only screen and (max-width: 1120px) {
.foogallery.fg-default .fg-item {
margin: 10px !important; /* Change the gutter size */
/* Change the width so two columns are displayed.
The 20px value is the gutter multiplied by 2
as it is displayed on the left and right of the item. */
width: calc(50% – 20px) !important;
min-width: calc(50% – 20px) !important;
max-width: calc(50% – 20px) !important;
}
}
@media only screen and (max-width: 768px) {
.foogallery.fg-default .fg-item {
margin: 0 !important;
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
}
}
