Why do desktop CSS rules apply to mobile site?

Question

Adaptive design

This rule works for the desktop version of the site. How can I make the mobile version of the site ignore it?

#___gcse_0 input[type="text"] {
    padding: 7px !important;
}

Answer 1

1. Check that there is a viewport meta tag in the head.

<meta name="viewport" content="width=device-width, initial-scale=1">

2. Add media to the CSS (decide on your own minimum screen width value in pixels).

@media only screen and (min-width: 480px) {
  #___gcse_0 input[type="text"] {
      padding: 7px !important;
  }
 }