1
I want to make a responsive design, the mobile version is already ready and working perfectly, but when zooming the layout breaks. How do I fix it, or better, use zoom in media query? Is there any solution to this? Thanks in advance.
1 answer
0
The first step would be to put the meta viewport in the <head> of the page to avoid any problem of scaling the elements and page on the device screen. In the viewport it is also advisable to use the 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 the : https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Now about the problem of Zoom in some elements is because you probably used percentage values 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.
Browser other questions tagged html css zoom
You are not signed in. Login or sign up in order to post.
Try to put inside the
<head>of your page<meta name="viewport" content="width=device-width, initial-scale=1">and forehead.– hugocsl
Still the same friend, I’m already using <meta name="viewport" content="initial-Scale=1.0, minimum-Scale=1.0, Maximum-Scale=1.0, user-Scalable=no">, I realized it affects more in items that have margins and in the navigation menu.
– darknone
Should affect almost everything where vc used values in % and not fixed values like PX, REM and EM. It is possible to access the page by a link?
– hugocsl
If you don’t have a link for us to see put here everything you have in the HTML and CSS page
– hugocsl
I discovered the problem friend, I used values in % instead of values in PX. I tested and solved, thank you very much!
– darknone
I can then publish the comment I made as a Reply to you?
– hugocsl
Sure, make yourself at home.
– darknone
Young I posted the answer, if I helped you in any way please consider marking the Reply with "Accept"
✔– hugocsl