Hi there!
I have a bit of an annoying problem with the grid for our projects.
When I first open the page https://dermul.com/projecten/ there is a weird white space between the images of the projects, the images are no longer aligned.
when I refresh the page, however, it does appear the way it should, but it never does when I open the page for the first time.
What could be the problem?
Btw: the grid is added as text in Cornerstone. The Grid settings are Masonry/Portfolio-skin with number of columns limited to 3 and Items Spacings (gutter) 8 px.
Hi Bart,
It seems that the default WordPress p tag addition feature forces the wrapper of the shortcode that you used to add extra spacing and that might be the problem cause. I am not sure about that but you can test, by adding the shortcode into Raw Content element. That should remove the extra p tag.
Alternatively, you can keep using the Text element but you need to add a div wrapper such as:
<div>[The Grid Shortcode]</div>
Thank you.
Hi Christopher,
Thanks for your reply. I added the shortcode into Raw Content, but unfortunately it didn’t do the trick. I also tried using the Text element with the div wrapper, but it didn’t work as well.
Is there anything else I could try?
Thank you.
Hello Bart,
I have checked your site and the image items are aligned properly when I load the page:
Can you please clear your cache and try again?
Thank you.
Hi Jade,
I cleared the browser cache and the cache in Wordpress, but it still appears like this:
Could it be the server cache?
Thank you.
Hi Bart,
I have checked on different browsers and they are displaying fine on Chrome/Firefox/Edge. That means it cannot be a server cache because it works on mine and Jade. Can you try checking on a different browser and see if the issue persists. Then let us know which browser and what version you have so we can duplicate on same settings. Thank you.
Hi Lely,
The problem also occurs on the other browsers.
These are the ones I used:
Hello Bart,
Please log in to your site and deactivate your W3 Total Cache plugin. In your Firefox, Edge and Chrome, kindly clear the browser caches or use the private browsing mode and test your site in any of your browser again. The browser cache must be cleared first before testing, remember that.
Hope this helps.
Hello Ruenel,
I deactivated the W3 Total Cache plugin and cleared all browser caches.
I tested our site on Firefox, Edge and Chrome, but the result remains the same. I also tried testing it using private browsing mode, but the issue was still present.
Thank you for your help.
Hello Bart,
We have tested your site in Chrome and Firefox. The grid loads without any issues as soon as the page load, no spacing or white gaps in the grid items.
Please edit your grid or create another with the same settings and test again.
Hi Ruenel,
I have replaced the grid, but the result remains the same.
The weird thing is that when I replaced the grid and clicked on this symbol 
to view the page on the website, it loaded without any issues.
But when I go the the website directly and click on projects, it appears with white gaps.
Hello Bart,
I did some further checking and I am able to replicate the issue but it happens sporadically.
I checked your Grid settings and the main cause of the alignment issue that because the grid you have set is supposed to be a Masonry Grid where the grid items do not have a specific placement and adjusts accordingly to the other elements. It would be best if you create a Grid skin that is a Grid type so that you’ll be able to be sure that the grid items will be aligned perfectly.
Let us know how it goes.
Hi Jade,
I adjusted the grid to a Grid type, but the white gap still appears.
I tried it on my laptop using the network at home and I also have the issue there.
The white gap always appears until I refresh, then the grid displays the way it should.
Could it be another plugin that isn’t working correctly?
Thank you.
Hello Bart,
That could be a possibility too. You can verify this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.
Also, I have logged in to your site but the Project grid is still in Masonry mode. You might want to try to clone the current grid then create a grid style template, set the grid as grid then test again.
Hope this makes sense.
Hi Jade,
I thought I had set it to Grid, but apparently not.
I checked it and it works now!
Thanks for your help!
Ah, glad to hear it’s sorted now, Bart. Thanks for letting us now.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
