0

I'm using CSS as follows to make some things fixed while others scroll

/* This makes the section fixed */
.fixed-section {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  pointer-events: none !important;
}

/* This makes the fixed elements clickable */
.fixed-section .column-content {
  pointer-events: auto !important;
}

Then, since it doesn't work good on small screens, I am disabling it on tablet wide, tablet portrait, and mobile with the following:

.fixed-section { position: relative !important; }

HOWEVER, i have noticed that on some screen sizes that are registering as desktop, they are still too small for the effect to work well, so I would like to make the objects revert to being non-fixed on any screen below a certain height. how do i do this?

Emily
  • 1
  • 1
  • Does this answer your question? [Sizing and positioning elements based on window width](https://stackoverflow.com/questions/10075524/sizing-and-positioning-elements-based-on-window-width) – samnoon Feb 26 '23 at 04:15
  • Are you overriding an existing CSS framework with `!important`? If not, you might want to avoid using `!important` as it'll likely make your CSS debugging and overall maintenance very challenging. – Bumhan Yu Feb 26 '23 at 05:27
  • @BumhanYu yes I am, I'm working in Semplice – Emily Feb 26 '23 at 05:33
  • @smabrar unfortunately can't make any sense of that – Emily Feb 26 '23 at 20:44

0 Answers0