Text overflows shrinking containers as browser is narrow, how to fix?
Here is the PEN: https://codepen.io/prodjuan/full/qBwJNjB
I have a nice layout with a grid of cells on the right column, but the description text spills out past the parent container. How can I fix this to look better? Smaller font? shorter line-height? Any other options? Thanks!
5 Replies
remove both height related properties from the
.two-columns selectorso, the height is needed to support a large background image that's behind the section, the image is scaled proportionally to the browser width which makes height bound to browser width.
if you don't/can't remove it you could add
overflow: auto; to the items-columnJust updated the PEN to include more of the page design this group is part of to demonstrate the purpose of panel height constraint
as i said adding overflow: auto seems to be the best option since making the items smaller will make them unaccessible imo. You could also use js to detect when the overflow happens or use media/container query and go from 2 columns to 1 column