'Responsive media queries only loading when window is adjusted

I have a Word Press site that is using the Avada Website Builder plugin, but with a custom template and a custom CSS file.

I have bootstrap 4.6 loaded onto the site as well. The bootstrap responsive queries run normally, but my custom CSS queries have some issues. Example -

.image-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    @include media-breakpoint-down(md) {
        width: 100%;
        height: 1620px;
        position: absolute;
    }
    &.desktop-bg {
        @include media-breakpoint-down(md) {
            display: none;
        }
    }
    &.mobile-bg {
        @include media-breakpoint-up(lg) {
            display: none;
        }
    }
}

That is my SASS file, and the CSS outputs as -

@media (max-width: 979.98px) {
  .image-bg {
    width: 100%;
    height: 1620px;
    position: absolute;
  }
}

@media (max-width: 979.98px) {
  .image-bg.desktop-bg {
    display: none;
  }
}

@media (min-width: 980px) {
  .image-bg.mobile-bg {
    display: none;
  }
}

When I view the page on mobile iOS Safari or on Chrome, those CSS rules do not load. However the CSS rules for the bootstrap grid (e.g. col-lg-4) load correctly.

When I view the page on Firefox, if I inspect and view as a predefined option, e.g. "iPhone 12/13" the CSS for my backgrounds do not load. However when I change the width of the window manually, the CSS loads correctly.

csssassresponsive-designwordpress-theming


Solution 1:[1]

I had to load this line of code -

<meta name="viewport" content="width=device-width, initial-scale=1">

It is now working correctly

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 jfc

Related Questions