When columns and elements within them change width, all too easily a visual hierarchy can be broken and along with it the relationship between element sizes and the outer window or viewport. This can happen quickly if you make just one set of fluid grid calculations and use those percentages across every screen width, from smartphones through tablets and up to large desktops.
The answer? Make several sets of fluid grids calculations, each one at a significant window or device width breakpoint.
I hit this issue on a recent project. The fully fluid layout lost its balance as the elements compressed at smaller screen widths. It became clear that multiple design adaptations were going to be needed, each optimised for a different viewport range. The project budget didn’t allow time to craft those multiple design options. I compromised by setting a min- and max-width within which the base grid worked well, sacrificing full responsiveness. Hopefully I’ll get the opportunity to revisit it in the New Year and may try taking the adaptive grid approach Andy Clarke discusses here.