MixItUp: Filtering elements don't display on the publish site

Design help Custom code
1

Hi there,

I built a website which is all static pages and the main pages uses the MixItUp plugin.
Thanks to @sabanna (Thank you a lot), I have found the tutorial here: Filtering plugins and follow the steps to apply MixItUp to my website.

But sadly, when I publish the site, the elements don’ts display at all.

1168×640 7.71 KB

Link to open my website in webflow:
https://preview.webflow.com/preview/procon?preview=f5870422a9997f47cf84201efb2ebaed

Does anyone know how to fix it? Please help me. Thank you so much for your time.

2

Works fine to me. Did you manage to fix it?

1 Like
3

Yes, I did find out how to use the filter. :slight_smile:
But another problem has appeared when I tried the Sorting Controls.

When the site load, the filtering elements appear with 4 columns.

1015×583 353 KB

But when the sort button is pressed it only shows 3 columns.

948×561 284 KB

I think I really need your help on that. :smiley:
Thank you so much, Sabanna.

4

Hello, @thangbe.

Before publishing the site you should make all “mix” items display: none. Other way, it is breaking the plugin functionality.

Regards,
Anna

5

I did make mix items display none when the problem happened.
Maybe I was working on the design site while you were taking a look at it (I was trying many options on the display setting to find out where the problem come from. So you might saw the mix items display was not set none.)

This is the mix display setting:

The design site: none mix items was displayed:

1018×569 8.75 KB

On the publish site, when sort buton wasn’t clicked, everything works fine. Items display with 4 columns. The distance between “head items” is 24 (mix items has the padding of 12 each sides, “head items” are nested inside mix items)

1173×679 179 KB

But when the sort button is clicked, Mix items display with 3 columns. And the distance between “head items” is 26.

1011×529 282 KB

I don’t know how the display setting was changing. :frowning:

6

I have found a way to manage the problem by setting the “mix” items margin to (-2) px.

But I still don’t know where the extra 2px come from when the sort button is clicked. :slight_smile:

7

Hello, @thangbe

I think I know what cause this issue. The inline-block value.

In the designer, there is no spacing between the tags, so inline-block will stick to each other. When you publish, perhaps you turn on the beautify HTML option in the site settings. Beautify means each element has it’s own line. So when there are spaces in the code, inline-block will have additional 5px due to the whitespace in the code. It may also be a result of plugins code too.

here is more information about this

Regards,
Anna

1 Like