Profile: tomS-10

Problem: I have a Bootstrap grid View that shows 4 columns on desktop size screens. I would like to show fewer columns on tablet and mobile devices, but the grid items have different heights so the rows do not break evenly.

Solution: The easiest way to fix this is to use a fixed height for all items. This will prevent the problem where rows break unevenly, but you may have to add some CSS that truncates the content of each item so long text isn't cut off at the bottom. You may also have to add some media queries to change the fixed heights at different screen resolutiosn. Other solutions may involve scrollbars inside each item's content, or using custom JavaScript to manipulate item heights.

Relevant Documentation:
https://stackoverflow.com/questions/33058004/applying-an-ellipsis-to-multiline-text