> One part of a solution to this problem is to use relative CSS units. Avoid hard breakpoints whenever possible. Only break columns into rows when there is no m

> One part of a solution to this problem is to use relative CSS units. Avoid hard breakpoints whenever possible. Only break columns into rows when there is no more space left. While the web still lacks in certain areas to accomplish this with CSS, there are many new techniques with grid and flex that allow very little use of media queries to reflow the content. When using break points, or media queries, I don't think you should abide to a constant set. While relative units might solve certain situations, it's not a complete solution. Using constant set of breakpoint sizes is what causes these bizarre jumps from a "wow this is a very stretched out mobile site." By using grid and flex and things like auto-fit, minmax(), etc will get you part of the way today. After you still need to use breakpoints to handle edge cases. These should always be set only at the point they are actually needed, not a fixed "this how wide phones kind of are." This way when the page is resized you have a fluid adjustment of content that only reflows automatically (with grid and flex) and at strategic breakpoints for edge cases. So regardless of the device it will flow more smoothly according to your site's content, rather than just 5 different screens (breakpoints).