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!

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
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

Write
Create snippet
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
Tags
masonry responsive
About author
capitalten
129Support score
7Questions 12Answers 0Snippets