Essential grid - layout bug

[Pbalazs89]

Hi there,

I have a site here: https://luizajewels.com/otthon/

At the bottom, we use EG to display the items. In the second row, it is clear, that there is an empty item inserted.

The same thing does not appear if I switch the layout to three columns. I tried resetting it to 4 columns again, but then the issue reappears. Any ideas as to what can cause this?

It shows up weird in the editor as well.

There are 7 items with that cat ‘‘ásványok’’:

So no error there.

What can cause this?

[tristup]

Hi @Pbalazs89,

Thanks for reaching out.
Although it is very difficult to understand the issue from the screenshot, it can be assumed that the height of the 2nd image of the First row might be the reason behind your issue. The image is a little taller than another one, and that is why it takes a longer height that covers the sections under it, which forces the image to move to the right. If changing the image does not help, please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[Pbalazs89]

Secure note added!

You might be onto something with the image size, however they do not differ. The last item starts a bit higher due to the issue, look:

This is the page with the issue:

https://luizajewels.com/otthon/

[ruenel]

Hello @Pbalazs89,

Please edit your grid and change the Grid Layout from “Masonry” to “Even”.

Kindly let us know how it goes.

[Pbalazs89]

Ahh, too bad, this does not fix the issue as it changes the layout.

Meaning you have to hover over the items to have them display their title.
One thing that I noticed is that if I set it to full-width, it fixes the layout, however I need it boxed.

Any ideas as how we can fix this?

Thanks!

Balazs

[prakash_s]

Hello @Pbalazs89,

Masonry is a grid layout based on columns. Unlike other grid layouts, it doesn’t have fixed height rows. Basically, Masonry layout optimizes the use of space inside the web page by reducing any unnecessary gaps. If you check the post grid on the browser 4th post has less height which is why the masonry layout places the post item(5th post item placed on 8th position ) under that post and depending on the height and space it places the item to reduce the space web page.

As suggested by my colleague @ruenel you need to select the “Even” in your grid layout and then you can change the skin as well in case if you don’t like the current skin layout in “Even” mode.

Thanks for understanding

[Pbalazs89]

HI @prakash_s ,

I’m unsure what you guys are looking at. For one. The whole site uses the same skin to display the products all over the site, look:

Gyűrűk - Luiza Jewels

No issues at all. Second, you mention that the 4th product takes up the place of the 8th. That is not the case, as all of the images uploaded are 263 * 263 pixels. I do see in the code that the earlier columns come before it, but this does not answer why the issue happens on this image (to me at least).

If you meant to say, that the height of the items are different because the title is longer / shorter. That does not seem to matter either, as the same can be seen on > https://luizajewels.com/gyuruk/

with no issues.

The client would not like to change the look of these items, and they are working everywhere else. It makes no sense that we need to page the whole sites layout because of a bug on one page.

Any other ideas maybe?

Thank you for your time.

[Pbalazs89]

Ahh, I managed to fix it by hacking the css a little bit. Thank you for your help. It did help, I see that the whole images + content height was smaller than the other items. Adding a min-height fixed the issue.

[ruenel]

Hey @Pbalazs89,

We are glad you’ve figured out a way to resolve your issue.
Thank you very much for letting us know.

Cheers.