0

There is an angular page containing buttons and other controls in Div elements. I have arranged them properly using css properties. They looks absolutely fine with 100% system resolution & 100% browser zoom. But when we change the system resolution to e.g. 125% or 150% using display setting on Windows OS. The buttons & other control positions of Div elements gets changed and they looks ugly on on the screen. Tried couple of options using @media properties in css for different resolution/zoom level but it needs lots of css entries per resolution/zoom level. Is there any better approach for adjusting UI elements based on resolution/zoom changes? Any suggestion/help with example would highly appreciated.

Below is the snapshot of css @media property that I am using currently.

@media (-webkit-device-pixel-ratio: 1.0909090909090908), (-webkit-device-pixel-ratio: 1.100000023841858) {
  .dlp-action-bar {
    padding-left: 14em !important;
  }
}

@media (-webkit-device-pixel-ratio: 1.2) {
  .dlp-action-bar {
    padding-left: 5em !important;
  }
}
Vinod Singh
  • 31
  • 1
  • is this similar to your issue ? https://stackoverflow.com/questions/9709125/how-do-i-stop-a-css-layout-from-distorting-when-zooming-in-out – Crocsx Jan 14 '22 at 09:47

0 Answers0