title: media query for iPad and other tablet devices
body: <p>I am trying to write a media query to make the site look proper in the iPad.</p>
  
  <p>I've got all device css files as mobile.css. And under mobile.css here's how I am making some changes.</p>
  
  <p>Below is the CSS code snippet. </p>
  
  <pre><code>@media screen and (max-width: 1024px) {
  
  
   .tobeaddedtobutton {
      background-color: transparent;
      width: 100%;
      height: 35px;
      border-radius: 0px;
      background-image: url("../assets/tablet/btn-border-yellow.png");
      background-repeat: no-repeat;
      text-align: left;
      font-family: Signika;
      color: white;
      border: none;
      font-size: 13px;
       }
  
       .tobeaddedtobutton-1 {
       background-color: transparent;
       width: 100%;
       height: 35px;
       border-radius: 0px;
       background-image: url("../assets/tablet/btn-border-orange.png");
       background-repeat: no-repeat;
       text-align: left;
       font-family: Signika;
       color: white;
       border: none;
       font-size: 13px;
       }
      }
  </code></pre>
  
  <p>Simply I am trying to add a different border image to the buttons when the device is iPad. But when I am changing the path under this media query, broweser is reading this code for all the devices, which is not correct.</p>
  
  <p>Am I doing it right?</p>
  
  <p>Please suggest.</p>