Hi, after updating the wordpress and the Proton-theme (did buy a new licence) the masonry grid after clicking on a portfolio item looks terrible in most browsers when pictures do not have identical dimensions.
Because in the mobile display version there is no grid, it is a problem on tablets and computer only.
I tested the following browers: Windows 10 / Firefox and Chrome [strange ugly grid as described]
On my IPad safari shows bad/ugly masonry, but Chrome is showing the grid as it should be for all browsers!
JPG Screenshots attached from the IPad:
IMG_0327.JPG ... screenshot IPad Chrome-Browser (the way it should be displayed in every browser in vertical orientation)
IMG_0328.JPG ... screenshot IPad Chrome-Browser (the way it should be displayed in every browser in landscape orientation)
Additional observation: It is the left column in the two-column-format only which is affected with the ugly "too much space"-effect - never the right column.
I did not notice, that now the images tend to pile up in the right column. That's even worse, than the ugly to much space in the masonry grid on the left side column.
After reloading the page in the browser it appears uncluttered: Screenshot (1041)
But it will not unclutter in firefox even after manually reloading:
Screenshot (1042) Screenshot (1043)
I tested that on another computer to be sure, it is not an error on my system - and not some old data in the cache/history of my browser.
This is not how i want my pages to look, if a potential customer visits my site. And: Now it is even a problem in the mobile version: There the images pile up, too.
I'm sorry I've tested only in that portfolio, I've added another solution. I have included a javascript file called images loaded, so that waits until all the images are loaded then calls the masonry layout, the chance to be wrong can be very low(or even none).
Hi, after updating the wordpress and the Proton-theme (did buy a new licence) the masonry grid after clicking on a portfolio item looks terrible in most browsers when pictures do not have identical dimensions.
Because in the mobile display version there is no grid, it is a problem on tablets and computer only.
I tested the following browers: Windows 10 / Firefox and Chrome [strange ugly grid as described]
On my IPad safari shows bad/ugly masonry, but Chrome is showing the grid as it should be for all browsers!
JPG Screenshots attached from the IPad:
IMG_0327.JPG ... screenshot IPad Chrome-Browser (the way it should be displayed in every browser in vertical orientation)
IMG_0328.JPG ... screenshot IPad Chrome-Browser (the way it should be displayed in every browser in landscape orientation)
IMG_0329.JPG ... screenshot IPad Safari-Browser (troublesome masonry grid landscape)
IMG_0330.JPG ... screenshot IPad Safari-Browser (troublesome masonry grid vertical)
Would be happy, if you can help me to fix it!
Thanks, Hanno
Hi,
There can be a slow communication with JS and the DOM of website, so to reload that fast, simply install the following plugin.
- https://wordpress.org/plugins/insert-headers-and-footers/
After installing go to the Settings > Insert Headers and Footers, add the following script in head or footer.
<script> jQuery(function($) { setTimeout(function() { window.dispatchEvent(new Event('resize')); }, 400); }); </script>Feel free to ask for anything you need.
Kind Regards
Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.
Done.
Does not change anything.
Thanks for trying - but i need further help.
Maybe i did not explain my problem good enough - so i try again.
The problem arises on big screens - computer or tablet - only.
If you go to my homepage https://uvw-fotografie.de/ everything is fine.
If you click on the upper left portfolio item - everything is fine on the following page:
https://uvw-fotografie.de/portfolio/immobilie-mit-weitblick/
But if for example you choose the second item on the homepage https://uvw-fotografie.de/ you come to this:
https://uvw-fotografie.de/portfolio/portfolio-11/
There the grid is ugly - too much space between some images.
I believe, everything is fine, if the images are equal in size on these second pages.
It goes wrong, if the images are different in size.
This is since i updated to wordpress 5.2 and the newest version of the Proton theme.
Hope you understand my problem and that you can help.
Thanks in advance for caring about my problem!
Additional observation: It is the left column in the two-column-format only which is affected with the ugly "too much space"-effect - never the right column.
Hi,
Oh, I thought that was for the homepage, here's the fixed code, it simply misses the masonry
<script> jQuery(function($) { $('.single-portfolio .masonry').masonry({selector: "selector"}); setTimeout(function() { window.dispatchEvent(new Event('resize')); }, 200); }); </script>Try it and let me know if it works, I've tested it on simulator and it worked. https://prnt.sc/p8r3il
Feel free to ask for anything you need.
Kind Regards
Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.
Works!!
Thanks a lot!!
You are welcome anytime, feel free to ask for anything you need
If you like our theme, please leave us a rate with 5 stars at ThemeForest, that would help us a lot.
Kind Regards,
NeuronThemes
Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.
"If you like our theme, please leave us a rate with 5 stars at ThemeForest, that would help us a lot." - Done.
I did not need to lie, to do so... ;-)
Thank you very much, it really helps us
Feel free to ask for anything you need.
Kind Regards
Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.
Hi, i have to reopen this thread. :(
I did not notice, that now the images tend to pile up in the right column. That's even worse, than the ugly to much space in the masonry grid on the left side column.
Screenshots from https://uvw-fotografie.de/portfolio/immobilie-mit-weitblick/
Screenshot (1040) ... piled up images on the right side
After reloading the page in the browser it appears uncluttered: Screenshot (1041)
But it will not unclutter in firefox even after manually reloading:
Screenshot (1042)
Screenshot (1043)
I tested that on another computer to be sure, it is not an error on my system - and not some old data in the cache/history of my browser.
This is not how i want my pages to look, if a potential customer visits my site. And: Now it is even a problem in the mobile version: There the images pile up, too.
Do you know, what to do? - I hope so!
Thanks in advance, Hanno
Hi Hanno,
No worry, feel free to open it anytime.
Can you please provide me with your wp-admin, I need to check why that is happening. Make sure to tick private box on the reply.
Kind Regards
Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.
Hi Hanno,
The script needed to be moved into footer scripts, so it loads after the DOM is completed.
- https://prnt.sc/p9tlza
I have moved and now everything works alright, remove the cache and try it again.
Feel free to ask for anything you need.
Kind Regards
Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.
Hi, I'm sorry, but i do not agree, that everything works alright.
On one computer it piled up in MS Edge and Chrome, when i first loaded https://uvw-fotografie.de/portfolio/immobilie-mit-weitblick/
On another computer images piled up as before, when reloading the page https://uvw-fotografie.de/portfolio/immobilie-mit-weitblick/ (Chrome browser)
Seems to be a bit accidentally. Those malfunctions are more difficult to fix...
Thanks for caring and working on it!
Hi Hanno,
I'm sorry I've tested only in that portfolio, I've added another solution. I have included a javascript file called images loaded, so that waits until all the images are loaded then calls the masonry layout, the chance to be wrong can be very low(or even none).
- https://prnt.sc/p9yai3
Feel free to ask for anything you need.
Kind Regards
Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.
Hi, everything looks fine now!
Thanks again!
Good to know, feel free to ask for anything you need.
Kind Regards
Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.