different heights of menu items

Hey there Volker,

Hope you’re well today ??

Would you mind posting link to your site where I can see this? We should be able to fix this by defining minimum height of each menu item with some CSS.

Best regards,
Bojan

Hi Bojan,

thanks for the quick response! The menu-page is not yet active, this is why we still have blindtext aand just a few items: https://www.cafe-zuckerschnecke.de/speisekarte/
As an example, i shortened the text of the first item making the whole container shorter than the rest. Now, I can easily assign a minimum height to the whole container with this css-snippet:

article[class*="menu_item_category-"] { min-height: 380px; }

But what happens then is that the article-container is overlapped by the container below and that is as far as I got…

Cheers, Volker

Hi again,

i just discovered something very funny: the overlapping of the containers which i described in the last posting only happens when the Firefox Developer Tools are open. I am not kidding, try it out ??
That solves my problem, i will mark the topic as resolved.
Still, many thanks for your response!

Cheers, Volker

Hey again Volker,

Glad you managed to figure that one out.

It appears that this happens on Chrome as well, I was trying to figure this out for the past 10 minutes and was adding different CSS code which didn’t work, at the end closed inspector and reloaded the page and the issue was resolved ??

Have a great weekend ??

Cheers,
Bojan

thanks Bojan, same to you!

just in case anyone else reads this, here is my solution:

set minimum height to article-container:
article[class*="menu_item_category-"] { min-height: 380px; }
make sure categories are always on the bottom of the container:
.grid-box .entry-content { min-height: 110px; }

you might want to adjust the height-values to your desired size.

Cheers, Volker

Hey again Volker,

A quick follow up, this bugged me for a moment so I had to investigate this further.

Just FYI this is not a bug, the reason it doesn’t work in developer tools is because the gallery is made using isotope which calculates and absolutely positions elements on page load which is the reason it worked after you made changes to your CSS file.

Cheers,
Bojan

Hi Bojan,

thanks for your research, i haven’t heard of isotope before. this is a great library, i will definitely use it for future projects!

Cheers, Volker