iconphotoco
Forum Replies Created
-
Hi @elviiso ,
OMG IT WORKED!!! Thank you so so SO much! Huge gratitude @elviiso. This is a game changer for me.
- This reply was modified 4 years, 11 months ago by iconphotoco.
Update: The mobile page looks fine now, not sure why.
Still wondering: is there a way to not need two totally separate galleries if I want 2 columns on screen widths below 768? It’s causing me so much extra work to maintain redundant galleries. please help.
@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:
I have the gallery set to Masonry: 2 columns (column width 500)
gallery is #foogallery-gallery-1505This 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; } }@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?
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?
@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.
EDIT:
This is the custom code I’m using so far, which *is* working to constrain gallery width to 1120 pixels, but *isn’t* working to display different numbers of columns at different screen widths.
@bradvin can you please help me modify & add to this code to accomplish 3 things:
1. constrain gallery width to 1120 pixels
2. reduce to 2 columns on screens below 1120px
3. reduce to a single column on screens below 768px.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;
}
}`- This reply was modified 5 years, 2 months ago by iconphotoco.
Thank you!
I’m already using one CSS snippet to make the gallery not span the full screen width:.foogallery#foogallery-gallery-1480{
max-width: 1120px;
}Do I just copy the snippet you shared below it? Or does it need to be inside the bracket at the end?
And (I realize this may be too much to ask but hell, I’m doing it anyway)–I don’t have coding experience so modifying the CSS so it has columns reduce to 1 at the 768 break point is out of my league. Could you please paste that snippet too? 🙂Thank you, Elvis! Worked like a charm.