Filter centering items

Hi,

if you want to center the buttons of filter plugin, you have to replace this line <div class="filter-nav"> with this line <div class="filter-nav d-flex justify-content-center">.

If you want to center images, you can add this code: .item.muuri-item.muuri-item-shown { left: 50%; }

Best, Marta

Hi Marta

Thanks for your reply. I've added following line to my css: .item.muuri-item.muuri-item-shown { left:50% !important} now the first pictures starts in the middle (left:50%), so it's not centered at all :-)

just take a look on: vitalmedia.ch/ringpraxis in team-section

Many thanks for your help in advance.

Claude

P.S: don't know why I i don't get an answer if I write to support@mdbootstrap , but I'm not really amused about your way to provide "Premium support"

Hi,

I see, your filter gallery is centered on your website. Do you need more help?

We answer on forum tickets and email messages every day in the morning of Central European Time (UTC+1:00).

Best, Marta

I've set different position's via media queries now. Is it ok, or should I do it in a different way?

.item.muuri-item.muuri-item-shown { left:18% !important} /*1rem = 16px*/
/* Small devices (landscape phones, 544px and up) */
@media (min-width: 544px) {
  .item.muuri-item.muuri-item-shown { left:20% !important} /*1rem = 16px*/
}
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
  .item.muuri-item.muuri-item-shown { left:5% !important}  /*1rem = 16px*/
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .item.muuri-item.muuri-item-shown { left:1% !important}
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .item.muuri-item.muuri-item-shown { left:7% !important}  /*1rem = 16px*/
}

Hi,

Media queries are good solution to fix this issue with centering, so for me your solution above is correct. If you need more help, don’t hesitate to write to me. I will help you.

Best, Marta