The Grid - Filter Bar hidden / disappeared

Support
#1

Hi,

the filter bar of my grids (created with the THE GRID plugin) are not showing any more. They seem to be hidden although present in the html code. They worked well before, I suspect an update to have broken the functionality.

I couldn’t find a way to fix it myself, could you please help me out?

Another thing is, that some of the grid items seem to have a different size than others, resluting in the grid getting more and more offset towards the bottom. I tried all sorts of scaling and cropping settings but couldn’t find a solution to make them all match rows / columns.
Not all grid items are supposed to be 1x1, some are supposed to be 1x2 or 2x2 rows / columns big. All I’m looking for is that they all match edges, but for some reason some are just some pixel bigger than others which the eventually creates an offset.
How can this be solved?

Thanks a lot!

#2

Hi there,

Thanks for writing in.

It’s because of custom CSS, and I’m not sure why the entire CSS of style.css is also there. Have you done some customization of how the CSS is being served?

The filter works on mobile since the custom CSS is only applied to the desktop using @media. Please try removing your custom CSS and test it again (there are too many) but make sure to back it up first.

Thanks!

#3

Hi,

Thanks for your reply.

The CSS customizations were put into the X-Options CSS menu. They do also apply to the mobile layout.
It’s strange that it only works on mobile any more, because it did work completely for over half a year before the recent update of X.
If I remove the @media adjustments the issue is not solved.

Can you please have a look what is now causing it?

Thanks a lot.

#4

Hello There,

I have analyze your custom css and I noticed this one thing. The @media block should appear after your css for the desktops. The best practice is this format:

.element {
  // your styling here
}

@media(max-width: 767px){
  .element {
    // your styling here
  }
}

This format is easier to debug because we know that the first block is for the desktops and the @media blocks is for a specific screen sizes.

Please do re arrange your css and check it again.

#5

Hi,

Thanks.
I had a look at it and while going through the CSS to rearrange it I found the cause for the filter bar being hidden. It is due to a custom CSS we put in to have it fixed on top of the grid. I’ll pass this on to the developer who did this change to fix it.

I’d still have this question about the grid thumbnails loosing their alignment. As you can see we set several different sizes for the grid thumbnails (1x1, 1x2, 2x1) and is this option within THE GRID setting to apply an overall spacing between these items, which I set to 5 px.
Now, having these different thumbnail sizes, the grid is loosing its alignment for some reason, which shouldn’t happen. As you can see the spacing is actually not uniform any more, the thumbnails are offset by some px or better to say the grid is not scaling / cropping them correctly to keep the uniform while having the spacing on.
How can this be fixed?

Thanks a lot!

#6

Hi there,

Yes, I’m not sure what’s the purpose of those custom CSS, but it just hides the filter.

About the alignment, your grid looks okay on my end. All are perfectly aligned, are you referring to small items in which 2 small items is equivalent to 1 big item? I think it’s normal on that grid and layout that you choose (masonry). In masonry, it will try to fill the gaps even small pixels. And even if you fix it on that current view, it will stay the same when the screen changes even by pixel size.

Thanks!

#7

Hi there,

Yeah, we’re just having a look at the code again. It’s a bit weird, before it just fixed it on top so it was still visible when the page was scrolled down.

About the alignment. On which browser are you seeing it? We’ve tried several (Firefox, Chrome…) but on all of them the alignment gets slightly out of sync if you scoll down.
As you are saying, it has to fill the gaps with pixels or crop the images slightly to make them align to the rows due to the different item sizes but this doesn’t seem to work properly.
Here’s a screenshot. This shouldn’t be normal, or?

Thanks.

#8

Hi There,

The offset happens in this section and it’s normal, and its just having a domino effect on the rest of the image below of that small 2x1 images.

The reason for that offset is the height of 2 small 2x1 images should be equal to the height of the big 1x2 image, right? But it’s not because that space between the 2 small 2x1 images is part of the calculation.

Hope this shed some lights,
Cheers!

#9

Hi,

Yeah, but then I would assume that either the smaller images or the big ones would be slightly cropped and recaled to ensure that everything is even. This option should be included somewhere in the plugin in my oppinion as this is clearly a huge visual bug. No one would like his grid slowly dominoing out of alignment by using different sized images. This is also one of the USPs for THE GRID which is also why we even decided to get the X theme.

Can you please let me know of a way to fix this?

Thanks!

#10

Hi There,

Can you share your admin credentials so we can check your setup? I tried the same setup and I can’t duplicate the same issue. On my test, I am using different image size. See this: https://screencast-o-matic.com/watch/cFVZiMoZpV

Let’s see if this is skin issue or some settings related.

#11

Great, thanks a lot!!!

#12

Hey There,

Thanks for providing the details. I have logged in and checked your grid settings. Please keep in mind that the Row number (1x1, 1x2, 2x1) only works for grid layout (not masonry layout).

I’ve made some changes and it is aligned now.

The grid settings must be this:

Hope this helps.

#13

Hi,

Thanks a lot for having a look and guiding me to the fix. I didn’t assume that the grid layout was essential to achieve this, but it kinda makes sense.
Btw… By setting it form masonry to grid layout the whole skin styles got screwed, if you didn’t notice… :wink: But that was an easy fix for me afterwards. Now it all works.

Thanks again!

#14

Glad it works now and you’re most welcome!

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.