From https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Look_and_Feel/Responsive_UI, I understand that I can override the default breakpoints. However after setting the PhoneWidth and TabletWidth for the DeviceConfiguration parameter, the breakpoint for Tablet does not seem to work.
For example, I have set PhoneWidth to 768 and TabletWidth to 992. I can see from the browser developer console that the body class changes to phone when the device width goes below 768 and change to tablet when the device width goes >= 768. But when it goes >= 992, it does not change back to desktop.
I have included my OML as a sample.
Hello Jeremy,
Hover your mouse on this line and you can see the dimensions, However it depends on screen type,Please check these for better understanding:
/* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ } /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ }
I hope this will work for you,Thanks &RegardsTousif
Hi Tousif,
Please see the screen captures from Google Chrome Browser.
The above is when SetDeviceBreakpoints is added to OnApplicationReady.
Then I have tried to disable SetDeviceBreakpoints and the below is the result that I have gotten. It shows desktop when it is only Laptop - 1440px.
Then, I have asked my colleague to try it works as per expected. Then, I have decided to try it on my laptop screen instead on my extended screen and it works as expected.
So now the problem lies with it being on an extended screen?
It depends on screen to screen, not all screen have same resolution, Instead of targeting specific devices, we can try specifying a general screen size range, then distinguishing between retina and non-retina screens. There are lot of different devices so we can’t define fixed breakpoints for each of them.we can’t say that there is a standard resolution for devices, but there are some commonly used breakpoints -
320px — 480px: Mobile devices
481px — 768px: iPads, Tablets
769px — 1024px: Small screens, laptops
1025px — 1200px: Desktops, large screens
1201px and more —  Extra large screens, TVthese breakpoints can differ from screen to screen but these common we use.I thing this will solve your problem.
Hello Jeremy
It seems the Breakpoint you have added are working correctly. With the Width > 992 it shows the Desktop and same way it is working for Phone and Tab as well. Please do remember it will change on > not in >=
Please feel free to ask in case your doubt is not cleared yet. Also, if it doesn't work for you let us know the Browser to check with same.
Hi Manish, Thanks for your reply, I have posted a reply to another suggested solution.
https://www.outsystems.com/forums/discussion/74009/setdevicebreakpoints-not-working/#Post303553
Hi Jeremy,
I'm struggling with the exact same issue. Did you manage to find a solution for it?
I'm also having issues with this in a reactive pwa app.