Beta 5 another row/column view by screen size bug

Beta
#1

Hi,

I have 8 column in a single row, set to display as:

4 columns + 4 columns on XL & L
3 columns + 3 columns + 2 columns on M
2 col + 2 col + 2 col + 2 col on S & XS screen sizes

the Medium screen size (768px - 979 px) continues to show the 4 + 4 view on the front end, yet correctly shows 3 + 3 + 2 cols in the Pro editor

link below

#2

Hi Scot,

Could you test something for me? While in the builder, but with the mobile switcher tool off (unrestricted), try resizing your browser slowly. If it looks ok in that case, I may know what the issue is. Assuming that works, we can proceed with the rest of this post - otherwise I’m off base and we’ll need to try something else

Open developer tools in your browser, put in the following and press enter:

window.devicePixelRatio

Let me know what number is returned. This will help me find a solution.

In beta5 I fixed an issue that occurred when using OS level font scaling or browser zoom. Because of how precise clicking one of those icons is, it actually put the screen width in an in-between state where no breakpoint was active. It’s like being at 767.325px which is more than 767 but less than 768 resulting in no media query being active.

It looks like that change may fixed some cases but not all. Here’s the topic I’m referring to: https://theme.co/apex/forum/t/column-layout-incosistent-with-breakpoints-views-windows-10/61935

Thank you for your help!

#3

Hi @alexander

I got a pixel ratio of 2 (retina screen perhaps?)

attached is a video showing the columns working correctly in the editor but incorrectly on the browser

#4

Thanks! Ok, I’m seeing what you mean now. It’s not the scaling issue, so scratch that. I built the same layout following your video and have confirmed this. Will let you know when it’s corrected.

Stand by - I’m sorry, I had the video open from your other thread. That issue is confirmed. Still looking into this one.

1 Like
#5

Hey Scot,

I’ve not confirmed this, but it does feel eerily similar to the other issues you’ve posted. Pro/Cornerstone actually have two CSS generation systems. One is in PHP and one is in Javascript (so we can update the CSS without talking to the server). The PHP version is used on the front end, so I’m wondering if there’s some kind of leak going on where it’s using the data from the wrong element. This would make sense why it doesn’t always happen. The error could have been there all along and is just now surfacing under the right combination of elements.

Would you mind saving this page as a template? I could install it and get a better idea of what’s happening.

Thanks

#6

obviously I’m sending over too many videos! :wink:

#7

haha no problem! They’re very helpful. My workflow right now is opening up all the recent beta threads in tabs and answer everything I can before switching back to working on issues - so I got the two video links mixed up… my mistake.

Thanks for sending this over. I’ll let you know what I find out.

#8

Hey Scot! I was able to get this sorted out for beta6. The problem is that it was pulling the flex-basis styles from the row immediately before it and skipping it’s own CSS. All better now.