// apply this to a div inside the body tag
// prevents page shifting to left/right as scrollbar appears/disappears
-// it works by calculating the width of the scrollbar and then adding
-// the corresponding amount of padding to left to keep things centered
-// see https://stackoverflow.com/questions/45524214/how-do-i-stop-my-web-content-from-shifting-left-when-the-vertical-scrollbar-appe
-.scrollbar-fix {
- padding-left: calc(100vw - 100%);
+// uses negative margin to force content to be drawn under the scrollbar
+// (this is useful for modals since scrollbar disappears during a modal)
+// note: intended to be used with div.container which adds padding for
+// media sizes sm and above, don't do it for xs to avoid losing content
+.scrollbar-fix-outer {
+ overflow-x: hidden;
+}
+.scrollbar-fix-inner {
+ @include media-breakpoint-up(sm) {
+ margin-right: calc(100% - 100vw);
+ }
}
// place a container div around entire page, and then use this