I am trying to write a media query to make the site look proper in the iPad.

I've got all device css files as mobile.css. And under mobile.css here's how I am making some changes.

Below is the CSS code snippet. 

```
@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;
     }
    }

```

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.

Am I doing it right?

Please suggest.