Why aren't my media query variables working in Bootstrap?

Question

I'm currently new to Bootstrap (3.3.4), and I seem to be having a problem with my launch site's footer position. I only want the footer to be fixed on larger screens (tablets and computers), not mobile.

Since Bootstrap is now mobile-first, I don't explicitly declare my footer's position style in my CSS (since I don't want it fixed) except for my larger screen media queries:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) {
        
  /* Pull out the header and footer */
  .mastfoot {
    position: fixed;
    bottom: 0;
  }

}

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) {
    
  /* Pull out the header and footer */
  .mastfoot {
    position: fixed;
    bottom: 0;
  }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) {

  /* Pull out the header and footer */
  .mastfoot {
    position: fixed;
    bottom: 0;
  }
}

However this causes it to not be fixed in any device. When I set the following outside of my media-queries, then it ends up being fixed in every device which I also don't want:

.mastfoot {
    position: fixed;
    bottom: 0;
}

How could I make my site display a fixed footer only for devices larger than 768px wide?

Answer 1

What you have displayed in your code is not CSS, it's "LESS". If you are using that for your CSS it will not work. You are using LESS variables for your media queries e.g.:

@screen-sm-min, @screen-md-min, and @screen-lg-min

You want to make sure you change the variables to actual pixel dimensions for your CSS like this:

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

  /* Pull out the header and footer */
  .mastfoot {
    position: fixed;
    bottom: 0;
  }
}

When you become more familiar with LESS it would be more advisable to make these modifications in the LESS file itself then output the CSS. And while this is subjective it would be even more so advisable to learn SASS instead of LESS.

But that's a whole different discussion.