0

I'm trying to use an @media command to set an element of my site to a different height for mobile browsing and i cant seem to get the code working. i would be very grateful if anyone here could see where i'm going wrong and point me in the right direction.

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

@media all and (max-width: 700px){
body .gilidPanel-opener {
      top: 85%;
    }
}
2
  • There's nothing wrong with your code there. But if you're using top the elements need to be position:absolute Commented Feb 26, 2014 at 2:59
  • i cant set the element to absolute as it'd mess with the rest of the page's styling. is there another value i could replace 'top' with? Commented Feb 26, 2014 at 4:43

1 Answer 1

2

Since the position property value is static by default, you need to provide different value such as absolute, fixed or relative to make your top property works, so try:

body .gilidPanel-opener {
   position: relative; /* or absolute or fixed */
   top: 55%;
}

@media all and (max-width: 700px){
body .gilidPanel-opener {
      position: relative; /* or absolute or fixed */
      top: 85%;
    }
}
1
  • thanks for your quick reply! the only value that works with the rest of the page is 'fixed' but with that the @media code still wont fire. (www.focallocal.org - tab on the left of the screen) Commented Feb 26, 2014 at 4:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.