Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Filter centering items

Claude Vital free asked 5 years 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 Wierzbicka staff answered 5 years 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


Claude Vital free answered 5 years 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 Wierzbicka staff answered 5 years 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 free answered 5 years 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 Wierzbicka staff answered 5 years 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



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.0
  • Device: Desktop & Mobile
  • Browser: Chrome
  • OS: OSX
  • Provided sample code: No
  • Provided link: No