2

I have menu that I would like to be positioned to left of the screen when screen is small (let say before SM) and positioned to right when bigger.

<MenuItems
  class="
    absolute left-2 top-24 w-full mt-8
    sm:right-2 sm:top-0 sm:w-max
  "
>

Settings for right-* works as expected when applied alone, however when prefixed with breakpoint sm left-* is taking priority.

Is it a way to use something that would cancel left on bigger screens? like sm:left-none

bensiu
  • 24,660
  • 56
  • 77
  • 117
  • Based on https://stackoverflow.com/questions/10245729/how-to-remove-left-property-when-position-absolute I find that `sm:left-auto` would work – bensiu Jan 16 '22 at 20:51
  • Does this answer your question? [How to remove Left property when position: absolute?](https://stackoverflow.com/questions/10245729/how-to-remove-left-property-when-position-absolute) – mo3n Jan 17 '22 at 11:12

1 Answers1

6

Yes auto can be used to cancel positioning values. So use sm:left-auto.

Another (worse) option would be to use right-full on smaller screens. But then your element would be offscreen. Though you could transform it back like this: right-full translate-x-full sm:right-0 sm:translate-x-0

Maximilian Schaum
  • 210
  • 2
  • 7