Portfolio layout shifts if only one is selected


Topic: Portfolio layout shifts if only one is selected

vince agresti pro premium asked 5 months ago

Expected behavior image / card size stays the same when only one item remains after filter Actual behavior size shrinks replicated on the distribution code Resources (screenshots, code snippets etc.) Development page filter for financial Base distribution page filter for less

Marta Szymanska staff pro premium answered 5 months ago


which elements in your gallery have the wrong size? Because when I look at your website, these tiles in the gallery are very simple and seems to look fine. Would you describe your issue in more details and point out where exactly problem exists? I'll try to help you.

Best, Marta

vince agresti pro premium answered 5 months ago

Thanks Marta I tried to keep it simple and I had really wanted to do multiple filters (i.e. office that worked with tech people in the Midwest)but this is how far I have gotten so far.

If you go to http://www.searchpath.info/loc.html and select Financial Services it will give a much clearer shift in size as I changed the page to give only one result.

Piotr Glejzer staff commented 5 months ago

I think the main problem is that you are using a grid with md='6' and lg='4' for this element. https://ibb.co/vvbcn24 is that what you need with this section?

vince agresti pro premium commented 5 months ago

The challenge there is that it sets the office as a single row even when the filter is not applied.

Piotr Glejzer staff commented 5 months ago

Yes, it is. But what do you expect because you are using the grid if you will put that element with col-md-6 or 4 it will be smaller. You can use JS to this with some condition if/else and remove this class.

Please insert min. 20 characters.


Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: laptop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes