[SOLVED] how do make my background image work with @media screen and ()

how do make my background image work with @media screen and ()

my @media code is not responding to any of the code i put into it like if i were trying to change the background color or background image it won't respond i am trying to change the position of a logo to fit mobile

.logo-Home-desktop a {
  background-image: url("../images/logo.png");
  background-size: 300px;
  background-repeat: no-repeat;
  position: absolute;
  height: 300px;
  width: 350px;
  text-indent: -99999999px;
  left: 50px;
  background-size: 340px;
  display: block;
}

@media screen and(max-width: 600px) {
  .logo-Home-desktop a {
    height: 250px;
    width: 250px;
  }
}


/* fix logo here to center in moble not responsive to media code */

<header>
  <nav>
    <ul class="navigation">
      <li><a href="index.html">Home</a></li>
      <li><a href="locations.html">Locations</a></li>
      <li><a href="contacts.html">Contacts</a></li>
      <li class="logo-Home-desktop"><a href="index.html">logo</a></li>
    </ul>
  </nav>

</header>

Solution

Your media query is formated wrong.

@media only screen and (max-width: 600px)

Is the correct format.

Also, make sure to have:

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

in your head tag.