We have written media query for android mobile devices which have the resolution (360x640) as below:

For portrait:

@media screen and (device-width: 360px) and (device-height: 640px)  and (-webkit-device-pixel-ratio: 4) and (orientation: portrait){

// Our code goes here


For Landscape:

@media screen and (device-width: 360px) and (device-height: 640px)  and (-webkit-device-pixel-ratio: 4) and (orientation: landscape) {

// Our code goes here


After we have written the media query as above, we have tested the output on a real mobile device. While we have checked it, we noticed that it looks good at first but when we open the keypad in mobile to type text in the HTML input-textbox, the website design is collapsing.

Is this because of media query syntax?

Below is the screenshot of the site in normal view:

enter image description here

Below is the screenshot of the site while opening keypad:

enter image description here

Please help me to resolve this issue.

  • Kindly attach screenshort – Jordy S Chemparathy Mar 1 '19 at 7:16
  • Attached the screenshots. Kindly have a look into the screenshots and let me know your thoughts. – Siva Mar 1 '19 at 7:28
  • Is the hot searches section is native ui right ? – Jordy S Chemparathy Mar 1 '19 at 9:30
  • The hot searches section is from a third party plugin – Siva Mar 1 '19 at 11:24
  • From the screenshot i thing there is a padding/margin or position absolute property is assigned to Hot Searches autofill. Please check the same. – Jordy S Chemparathy Mar 1 '19 at 11:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.