#133177 Tablet breakpoint on small laptop screen reveals hidden rows
Jennifer 1 week, 1 day ago
OK so we had a weird instance of someone being able to buy products from hidden rows. We’ve now set them to ‘out of stock’ but we were finally able to recreate the bug. Please see video here: https://peter-bps.tinytake.<wbr />com/msc/NTkxMzk0M18xODA0ODI1Mg
We only want these hidden as they’ll be going live shortly, so it was really a very temporary measure. But we realised this bug could cause other issues. For example, I have certain rows added for mobile and hidden for other devices, and vice versa, because the styling is just better that way.
Please can you take a look and advise us what is best to do to resolve this?
JenAlexander Hutsol Support Team 1 week, 1 day ago
Please provide us with wp-admin login details to your site in the private reply https://prnt.sc/qr3w3e to check the issue.
Thank you. Looking forward to your reply.
Regards.PrivateJennifer 1 week, 1 day agoThis reply has been marked as private.Amir Rather Support Team 1 week ago
I checked the page on Tablet and iPad screens and it looked alright, the resizing of the screen is not a real-world scenario.
However, there are options in Elementor to create additional breakpoints How To Use Additional Breakpoints | Elementor and then tinker the Elements accordingly, I would still recommend checking in a simulator like Browser Stack or on real devices once.
RegardsJennifer 1 week ago
Unfortunately it is a real-world scenario as 1) It’s happened to us and someone bought something that was hidden at the time, and 2) the ‘half screen’ option referred to in the video is a genuine setting that some people chose to use. So while I agree that it all looks fine in the desktop, laptop, tablet, phone screen sizes, there is another set of screen sizes to consider, thanks to ‘Window Snapping‘.
So I’ve deleted hidden rows at the moment. But the styling being ‘off’ for half screen size (as seen in the video) is a bit of an issue.
Thanks for that article, that is a really helpful feature. I noted is says: “Conditioning controls on values of responsive controls is not supported when this mode is active” – sorry can you explain that bit? I don’t want to turn this on and then break something!
JenMohsin Al-Rabieai Support Team 6 days, 21 hours ago
Thanks for your consideration and reporting it. I should mention that, Elementor is engaged here and it is using the default breakpoints like below:
'xs' => 0, 'sm' => 480, 'md' => 768, 'lg' => 1025, 'xl' => 1440, 'xxl' => 1600,
However, as far as I know, Elementor does have some free gaps somewhere between 767px and 768px and it applies to every other breakpoint it has. I’m not sure about the reason, but there is a chance you can change these values to another number and it should fix your issue. Here is how you can change the layout settings on Elementor and define new breakpoints.
Hope it helps 🙂