How to set filter on the left side

How To
1

Hi,

I made a filter on Podcasts - Helden Bureau. You see the filter on the top. How can I set it on the left side? I couldn’t find any options to do this. Hope someone can help me.

2

Hi Anushka,
Unfortunately, this is not possible at the moment, as it would require a lot of new layout options.

But you can achieve it with custom CSS, of course:

@media (min-width: 992px) {

  /* The posts element */
  root {
    display: flex;
  }
  
  /* Filter ul */
  root .bricks-isotope-filters {
    width: 20%;
    padding-right: 30px;
  }
  
  /* Posts ul */
  root .bricks-layout-wrapper {
    width: inherit;
  }

}

Best regards,
timmse

3

Hi Stefan,

Thank you for the code, but doesn’t work as espected. I have send an email so you can login to check. Hope you can see what is wrong. The issue is that the filters are not on the left side of the podcasts, but above them. Can’t figure out how to change it. Also how can I put each filter tag in a different row? Now it shows several in one row.

4

Hey,

they are on the left on screens larger than 992px: https://vimeo.com/670322813/531146f7bb

Showing them also on smaller screens on the left is not useful, because then there is much too little space.

5

Thank you, forgot to clear cache. Is it possible to get each tag in a new row?

6

Sure,

extend the code within the @media query with:

/* Filter li */
root .bricks-isotope-filters li {
display: block;
}

Add the padding-right back to the ul and it looks nice :slight_smile:

1 Like