Bug: inconsistent breakpoints

[striata]

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.

[ruenel]

Hello @striata,

Thanks for writing in!

You have hidden the icon columns in smaller screens.

When doing that, please also set the number of columns to 3.

Hope this helps.

[striata]

Yes, this is exactly what I have done. And this is where the problem is. Please re-read the description of the problem. The class x-hide-xs kicks in when you reduce your screen width from 481 to 480, and hides the icons. The change to 3 colmuns kicks in when you reduce the screen from 480 to 479. At exactly 480, the icon is hidden, and the layout has not yet changed to 3 columns. This is at least how I interpret the phenomenon.

[christopher]

Hi @striata,

I performed a test on my local installation and I added 4 columns and tried to hide the cell for the mobile screens (480px). The problem that I do see on your installation does not happen on mine.

This shows that there is something off on your installation or the way that you added the cells which cause the issue.

Have you added a custom CSS code that might cause the issue? I also see that the desktop mode is not working ok too as it goes all the way beyond the restrictions of the container on the right-hand side.

You can test that 480px is working correctly, by just adding a new section and set cells and you are going to see that everything works correctly.

The only thing that I can suggest at the time being is to recreate the feature from scratch again and save on each step and test the mobile view to see which step was the cause of the problem.

If you find the cause of the problem we’d appreciate having a description of the steps you took with the login information of your website via Secure Note so that we could take a look to recreate the problem and report to our development team.

Thank you.