cant get my @media code to fire, can you see why?

Question

body .gilidPanel-opener {
top: 55%;
}

@media all and (max-width: 700px){
body .gilidPanel-opener {
  top: 85%;
}
}

i've been told in a previous question that i need to use 'absolute' on the element if i am using the value 'top'. absolute breaks the function of my element, does anyone know a way around this?

if you want to see for yourself, the page is www.focallocal.org and its the tab on the far left of the screen which i want to appear lower on a mobile device so it doesnt block reading.

Answer 1

It's called media query and it is fine. The reason it's not working is because your default css has higher priority than this. You are already using fixed position so top should work fine. Use this

@media all and (max-width: 700px){
  body .gilidPanel-opener {
    top: 85% !important;
  }
}