I want to make a responsive design, the mobile version is ready and working perfectly, but when zooming the layout breaks. How do I fix it, or better, zoom in the media query? Is there any solution for this? Thank you in advance.
I want to make a responsive design, the mobile version is ready and working perfectly, but when zooming the layout breaks. How do I fix it, or better, zoom in the media query? Is there any solution for this? Thank you in advance.
The first step would be to put the meta viewport in <head>
of the page to avoid any problem of scaling the elements and page on the device screen. In viewport it is also advisable to use width=device-width
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
More details about: link
Now about the problem of zooming in some elements is because you probably used values in percentage in them%
Everything that has the value in% is affected by Zoom. To fix this use fixed values like PX, REM and EM where possible.