Filter centering items


Topic: Filter centering items

Claude Vital pro premium asked 2 months ago

Hi Guys wanna center the items of filter-plugin, how to do? actually, and also in your samples they are left aligned. Many thanks in advance for helping out here.


Marta Szymanska staff answered 2 months ago

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


Claude Vital pro premium answered 2 months ago

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"


Marta Szymanska staff answered 2 months ago

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


Claude Vital pro premium answered 2 months ago

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*/
}

Marta Szymanska staff answered 2 months ago

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


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: jQuery
  • MDB Version: 4.8.0
  • Device: Desktop & Mobile
  • Browser: Chrome
  • OS: OSX
  • Provided sample code: No
  • Provided link: No