I have designed the online SharePoint responsive with the media queries, And when i tested it with a mobile all are working perfectly without this textbox input fields issue. The issue is when i touch the textbox in the news-feed the view become zoomed and the alignments of the CSS components become unstable and when i touch the search textbox same happens and with that the keyboard comes and disappears suddenly, simply cant input values. I have tried the zooming disabled feature by modifying the meta tag but it doesn't worked. Please help me to solve this

1 Answer 1


Since it is zooming, your media queries are being applied again and messing up your alignment. One way to fix this would be to use fixed width for different media queries so that zooming doesn't affect it.

  • so it means that i have to use "px" values for width and height right ? not %
    – GTNSP
    Oct 23, 2015 at 5:10
  • Yes, that is correct. You can define different px values for different media queries and see if the issue is resolved.
    – Akhoy
    Oct 23, 2015 at 5:11
  • but that will be more complex because for the responsiveness % is more efficient than including px values for width right ?
    – GTNSP
    Oct 23, 2015 at 5:52
  • Not in all cases. Media queries are designed for just that. If you are using %, media queries are not needed since it'll automatically resize based on the viewport width. For fixed width, you can define different widths for different viewport sizes. If you look at Bootstrap container css, they have defined fixed width for different media queries to make it responsive.
    – Akhoy
    Oct 23, 2015 at 6:41
  • Since you might have designed the widths in % etc, when zooming happens widths are calculated relative to that which likely messes up. Anyway, fixed width is just a suggestion.
    – Akhoy
    Oct 23, 2015 at 6:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.