Windows screen scale 150% and breaks the balance of layout of datagrid2

0
Hello.  I have been going through one of the issues with the client. It seems like I have set 100% in Windows Screen Scale (image below) but the clients use the recommended scale which is 150%. Now it looks all different in the data grid 2 and etc when I set 150% on my device. Is there any way to keep the balance of the page regardless of the user customized screen scale setting? I would appreciate if you share any ideas. Thank you.  
asked
2 answers
0

The root of the problem is likely the use of fixed pixel (px) values for widths, margins, or font sizes in your page's styling. When the browser zooms, these fixed values don't scale gracefully relative to everything else.

The solution is to use relative units in your styling (Sass/CSS).

  • For width and layout: Use percentages (%) instead of pixels (px). This allows containers to grow and shrink with the browser window (or zoom level).

  • For fonts, margins, and padding: Use rem units. A rem unit is relative to the font size of the root HTML element. When a user zooms or has a high DPI screen, the browser adjusts this root font size, and everything styled with rem will scale up proportionally and perfectly.

Example:

  • Bad (Fixed): width: 800px; font-size: 14px;

  • Good (Responsive): width: 80%; font-size: 1rem;

This is still just one thing you should be aware. For a broader perspective please check the following learning path 

 

https://academy.mendix.com/link/paths/122/Polish-your-Styling

answered
0

The approach that you're looking for is Responsive web design.

There isn't a single simple solution to that problem. Know your target device (settings) and adapt accordingly.

answered