How to ignore CSS bottom property?

Question

How can I ignore bottom property on mobile screens?

<div id="myID">...</div>

#myID {
  position: fixed;
  bottom: 5px;
  right: 5px;
  opacity: 1;
  cursor: pointer;
}
@media (min-width:305px) and (max-width:415px) {
  #myID {
    top: 8px !important;
    right: 225px !important;
    zoom: 0.6 !important;
    z-index: 99999999 !important;
  }
}

It tries to take bottom:5px and top:8px at the same time, and it causes some problems on mobile screens.

But your code working fine without `bottom` property in given `media query` range. — Jyothi Babu Araja, Jan 01 '17 at 14:31
It works fine on Chrome mobile device mode, however ıt doesn't work perfect on real mobile device when i scroll the page fast. — Mert, Jan 01 '17 at 14:38
Once check the dimensions you used. Better to use the standard mobile sizes. — Jyothi Babu Araja, Jan 01 '17 at 14:47

score 0 · Accepted Answer · edited May 23 '17 at 12:08

0

You can reset bottom to the initial value auto, e.g.

@media (min-width:305px) and (max-width:415px) {
  bottom: auto;
  ...
}

By the way, you can remove all the !important declaration in your example. In fact it's highly recommended to do so, read this post to learn more.

edited May 23 '17 at 12:08

Community

1
1

answered Jan 01 '17 at 15:23

Stickers

75,527
23
147
186

How to ignore CSS bottom property?

1 Answers1