I have deployed the image gallery in three different sites, and I have noticed the following issue on all the three websites.
When using "Image Gallery" in "Image Grid Style" and "Masonry" enabled, sometimes, often seems to be random, I face these image positioning issues. It might be something to do with one additional line of pixels due to the odd/even nature of item spacing? I'm not sure but it could be something to do with the scaling.
When I have the display set at 80% or 90%, sometimes the issue would show up, but get fixed at 100%.
I have also noticed the opposite where the issue shows up when display scaling is at 100% and gets fixed when changed to 80%.
The first screenshot (sc1) was of the page when scaling was 80%, the second screenshot (sc2) was when the page was at 100%. In 1st screenshot, even though we have set the layout to show images in 3 columns, it shows all the images in 2 columns. In another website, I instead of showing in 4 columns, sometimes, it shows it all in 3 columns. However often times, refreshing the page fixes the issue.
Do you refresh the Page after Scaling ?. I am afraid scaling the page without refreshing is not a correct measure to test sites that use JS to layout the pages.
My screen is 14 inch 1080p screen, my default browser setting is 80% scaling. So when I first load the page, the gallery appears with the explained problem. After refreshing the screen, the issue sometime repeats, sometime fixes.
Another user who made the complain has a 13.3 inch laptop with 1080p screen, and uses his laptop at 75% scaling. He mentioned the same issue.
So we aren't testing the page by changing the scaling in real time once the page loads. We first faced the issue, so we refresh the page. And we only changed the scaling once the page loads to try and understand where the issue roots from.
So far I haven't been able to see the issue occur yet from my side when testing with Chrome 92 - I've tried to load the page dozens of times with various scaling (50%/67%/75%/80%/90%).
Can you try to add in the following CSS and see if it makes a difference on your side?
body .portfolio-items .col.span_4 {
width: 32.9%;
}
It looks as though you may have your browser zoom altered from the default 100%. Can you verify that the error still occurs when you reset that to normal?
Faced the issue with default scaling, as well as non-default scaling. Scaling up or down doesn't change it.
Also, I have used the Portfolio plugin on a handful of different websites, and I have faced the same issue on pretty much all websites every now and then. Clearing the cache on website end and on browser end usually fixes the issue. But I was unable to figure out where exactly the issue roots from.
So far I have only been able to replicate that issue when using a nondefault browser zoom and haven't see other reports of this occurring when loading a page with 100% zoom active. If the issue already occurred for your on-page load while being zoomed out, it wouldn't be corrected until you refreshed the page with the standard zoom set. It also looks like this is a known issue related to nondefault browser zooms within the underlying plugin which handles the layout positioning, however, they do not intend on adding in a workaround for that: https://github.com/metafizzy/isotope/issues/995
If you're sure that it also occurs for you when loading the page at 100% zoom, can you please provide a quick screen recording of that occurring with the browser console open so that I can take a look?
Hey
I have deployed the image gallery in three different sites, and I have noticed the following issue on all the three websites.
When using "Image Gallery" in "Image Grid Style" and "Masonry" enabled, sometimes, often seems to be random, I face these image positioning issues. It might be something to do with one additional line of pixels due to the odd/even nature of item spacing? I'm not sure but it could be something to do with the scaling.
When I have the display set at 80% or 90%, sometimes the issue would show up, but get fixed at 100%.
I have also noticed the opposite where the issue shows up when display scaling is at 100% and gets fixed when changed to 80%.
The first screenshot (sc1) was of the page when scaling was 80%, the second screenshot (sc2) was when the page was at 100%. In 1st screenshot, even though we have set the layout to show images in 3 columns, it shows all the images in 2 columns. In another website, I instead of showing in 4 columns, sometimes, it shows it all in 3 columns. However often times, refreshing the page fixes the issue.
Hey Again,
Do you refresh the Page after Scaling ?. I am afraid scaling the page without refreshing is not a correct measure to test sites that use JS to layout the pages.
Thanks
ThemeNectar Support Team
Hey!
My screen is 14 inch 1080p screen, my default browser setting is 80% scaling. So when I first load the page, the gallery appears with the explained problem. After refreshing the screen, the issue sometime repeats, sometime fixes.
Another user who made the complain has a 13.3 inch laptop with 1080p screen, and uses his laptop at 75% scaling. He mentioned the same issue.
So we aren't testing the page by changing the scaling in real time once the page loads. We first faced the issue, so we refresh the page. And we only changed the scaling once the page loads to try and understand where the issue roots from.
Thanks for the additional Information. Escalating this to the developer for further response.
Best
ThemeNectar Support Team
Hey alberteck,
So far I haven't been able to see the issue occur yet from my side when testing with Chrome 92 - I've tried to load the page dozens of times with various scaling (50%/67%/75%/80%/90%).
Can you try to add in the following CSS and see if it makes a difference on your side?
body .portfolio-items .col.span_4 { width: 32.9%; }Hey alberteck,
It looks as though you may have your browser zoom altered from the default 100%. Can you verify that the error still occurs when you reset that to normal?
Hey!
Faced the issue with default scaling, as well as non-default scaling. Scaling up or down doesn't change it.
Also, I have used the Portfolio plugin on a handful of different websites, and I have faced the same issue on pretty much all websites every now and then. Clearing the cache on website end and on browser end usually fixes the issue. But I was unable to figure out where exactly the issue roots from.
Hey alberteck,
So far I have only been able to replicate that issue when using a nondefault browser zoom and haven't see other reports of this occurring when loading a page with 100% zoom active. If the issue already occurred for your on-page load while being zoomed out, it wouldn't be corrected until you refreshed the page with the standard zoom set. It also looks like this is a known issue related to nondefault browser zooms within the underlying plugin which handles the layout positioning, however, they do not intend on adding in a workaround for that: https://github.com/metafizzy/isotope/issues/995
If you're sure that it also occurs for you when loading the page at 100% zoom, can you please provide a quick screen recording of that occurring with the browser console open so that I can take a look?