I am working on a web application, and I am facing a lot of issues when zooming
Here is a blueprint of the architecture of the page :
lately the client asked us to make the application adjustable with different resolutions, the original one is : (1280*1024), now We have added some media queries so it will fit in (1600*900) & (1920*1080), currently the application is working fine in these resolutions, but we are facing one problem which is triggered when the user zooms in or out, the page becomes messed up.
I have looked online, and I've found that I need to wrap the header and content in one single div, and assigning margin : 0 auto; with a max-width & max-height..., I did that but I still have the same issue.
Apparently the problem disappears when I use the emulator in Internet Explorer and I precise the resolution such us Below the application is working fine when zooming, but when the Emulator is on default mode the problem occurs.
The application is very old and it's working only in IE11 compatibility mode.
So my question is, how to fix the size of the page in different resolutions without modifying the emulator?