So I was looking at a pretty design for related posts in 5 neat blocks in a row. Normally anything that needs to reduce in columns in narrower viewports, I would just increase the percentage width. So at minimum width, 100%, as we get wider, 50%, and finally at our widest, 20%. But when you reduce the columns to 50% and you have an odd number of items, there will be one dangling by itself. So I came up with a quick solution: make the third one full width. See this pen to see what I mean:

See the Pen Responsive Fifth Columns by Tammy Hart (@tammyhart) on CodePen.

Leave a Reply

Your email address will not be published. Required fields are marked *