Topic: How do I implement the Masonry to be Responsive?

capitalten free asked 5 years ago


I've noticed that the Masonry (https://mdbootstrap.com/docs/jquery/layout/bootstrap-masonry/) isn't responsive. That it, it should display less and less columns as the width of the display shrinks, and eventually to only 1 column when viewed on a small device. This "responsive" behavior should be the same like those "Cards" in "e-commerce" (https://mdbootstrap.com/docs/jquery/sections/e-commerce/)

Any chance that it would be responsive in a future release?

Or, what is the workaround to make it responsive?


capitalten free answered 5 years ago


I resolved it using: class="grid-item col-lg-3 col-md-6 col-sm-12 mb-4"


capitalten free answered 5 years ago


I took the sample code for the Grid Option (Masonry - Bootstrap 4 grid) and changed to 4 columns (your sample code currently shows 3 columns).

As I reduced the window width to simulate smartphone size, all columns became smaller and eventually changed to just 1 column.

I'd like to show a minimum of 2 columns instead. How do I change the code?


capitalten free answered 5 years ago


I saw the new masonry feature! Looks Amazing!!! I'm going to try it soon!!


Marta Wierzbicka staff commented 5 years ago

I hope you like it ;)


Marta Wierzbicka staff answered 5 years ago


Hi,

this feature will be released on 29/04/2019.

Best, Marta


capitalten free answered 5 years ago


Is this feature on the way to being released?


capitalten free answered 5 years ago


Sounds good.

(I did some research.Would it be something like this: https://masonry.desandro.com ?)

Anyway, I'm looking forward to your implementation!!!


Marta Wierzbicka staff commented 5 years ago

Hi,

yes, it will be something like this. We're working on this now.

Best, Marta


capitalten free commented 5 years ago

Wonderful! Thanks!!!


Marta Wierzbicka staff answered 5 years ago


Hi,

this issue will be fixed in the next release at the end of April.

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

Resolved

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: macOS
  • Browser: Safari
  • OS: Mojave
  • Provided sample code: No
  • Provided link: Yes