Bootstrap: Only Show Fixed Footer In Larger Screens?


Tags: html,css,twitter-bootstrap,less,css-preprocessor

Problem :

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 code (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?



Solution :

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.


    CSS Howto..

    How to apply rounded borders to highlight/selection

    How do I link JS file from other folder to a page?

    How can you print a page that has been altered by javascript?

    How to re-animate CSS3 animations on class change

    How to resize grid-view column width?

    How to let Fancybox Next and Previous button stay visible

    How to play a video inside a logo

    How to use css media query to switch animations

    How to make specific areas in a div clickable with css / js / anything

    How do I use pseudo-selectors to change a “Home” button to an icon using just CSS?

    How to vertically align items in horizontally ul list with images?

    HTML/CSS current active menu does not show active

    How can I make a CSS glass/blur effect work for an overlay?

    How to test print output of browsers with online tools?

    How to use the not selector correctly in CSS [duplicate]

    How to make blur effect without white light?

    How do I filter unwanted CS styles from CS sheet?

    How to select an html element that has two class names?

    How to create css code that works for all browser?

    How to select the last element within an element regardless of type in CSS?

    how to make css submenu stay put when subpage has been selected

    How to fix text running off screen and breaking layout without using CSS word-break property?

    How to make DIVs flow to the left in a x-scrollable pane with CSS?

    How can i make it through using bootstrap grid?

    How can I hide a div when content is not displayed

    How to prevent blur from CSS transform?

    How to create an image tag cloud

    How to read minified CSS?

    HTML/CSS: How do I make an input field with 2 vertically positioned buttons next to it?

    CSS list styling - how to reduce the distance between parent and children of the previous parent?