Hi, I have discovered what I think is a bug in the way breakpoints are handeled. I ran into it when designing a grid. I have given the grid different designs on the different breakpoints. I have also some cells that are shown/hidden on different breakpoints. The problem is that the breakpoints for the grid design, and for showing/hiding things, seem to be different. For example, the exact width 480 px seems to belong to the XS layout in one case, and to the SM layout in the other case (can’t wrap my head around which is which). As a consequence, there is a 1-pixel range where the layout is messed up.
To see an example, go to the page https://stria.tech/themecosupport/.
There is a table (it’s a grid), the grid has 4 columns, the left column contains only icons. Now make the browser window very narrow (<480 px). The grid changes to a 3-column layout, and the icons disappear. Now carfully change the window size to the breakpoint where the icons appear/disappear. When you do this very carefully, you will find one width (exactly 479, 480 or 481 px) where the icons are hidden (like in XS), but the grid is 4 columns (like in SM). Obviously, the whole content is messed up at this exact browser window width.
You should check if this discrepency exists at other breakpoints as well.