Collection Display Fragment is not responsive when using the CSS Medium Screen Size (col-md)

Legacy Knowledge Base

Published Jun. 30, 2025

Collection Display Fragment is not responsive when using the CSS Medium Screen Size (col-md)

Written By

Adrienne Lao

Legacy Article

You are viewing an article from our legacy "FastTrack"publication program, made available for informational purposes. Articlesin this program were published without a requirement for independentediting or verification and are provided "as is" withoutguarantee.

Before using any information from this article, independently verify itssuitability for your situation and project.

Issue

We've observed that when using the Collection Display fragment to display a collection of data/items and selecting the medium screen size (col-md), the responsiveness becomes unreliable.

Environment

Quarterly Release
2023.Q4 and below

Resolution

There is a workaround available, but it will involve altering the CSS through the fragment's Advanced Settings (Advanced Settings Reference).
- Try adding this sample code to the Custom CSS field:
```
<style>
@media (min-width: 768px) and (max-width: 991px) {
  .[$FRAGMENT_CLASS$] .col-md-1 {
    width: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}
</style>
```
If altering the field is not an option, this behavior has been addressed in LPD-18557 and has been fixed in Quarterly Release 2024.Q1.1. Upgrading to a newer version of Liferay or requesting a hotfix including LPD-18557 will resolve the behavior.