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

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.