-1

I'm using a fixed footer on my webpage.

On mobile, it is fixing to the bottom of the page and covering other content.

How can I change it so that the footer is fixed only on large/desktop screens?

Rohit Sharma
  • 3,304
  • 2
  • 19
  • 34
user3200365
  • 37
  • 6
  • use media query for that – chirag satapara Jul 06 '17 at 05:07
  • this is the refrense `https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile` and for mobile and tablet , change `position` attribute `fixed` to `relative` of `.navbar-fixed-bottom` class – chirag satapara Jul 06 '17 at 05:11
  • Possible duplicate of [Fixed footer in Bootstrap](https://stackoverflow.com/questions/19330611/fixed-footer-in-bootstrap) – Momin Jul 06 '17 at 05:11

3 Answers3

1

Use media query css for the solution.

@media (min-width:320px)  { .navbar-fixed-bottom{position:relative !important;} }
@media (min-width:480px)  { .navbar-fixed-bottom{position:relative !important;} }
@media (min-width:600px)  { .navbar-fixed-bottom{position:relative !important;} }

Hope this answer helpful to you.

chirag satapara
  • 1,947
  • 1
  • 15
  • 26
1

You can read about bootstrap 3 breakpoints here

Small screens are usually smaller than 768px, so if you don't want the footer fixed on small screens. you can change the position of the footer in the small screens using the media queries.

/*for mobile phones and tablets (both)*/
@media only screen and (min-width: 320px) and (max-width: 767px) {
  .navbar-fixed-bottom {
    position: static !important;
  }
}

/* for mobile phones only*/
@media only screen and (min-width: 320px) and (max-width: 480px) {
  .navbar-fixed-bottom {
    position: static !important;
  }
}

Or you can see one more solution here for the same.

You can check the mobile view of the website the developer tools the browser.

Rohit Sharma
  • 3,304
  • 2
  • 19
  • 34
0

Or second solution is to add padding for container on mobiles:

@media only screen and (min-width: 320px) and (max-width: 991px) {
    .my_container{

      padding-bottom: 100px !important; //example

    }
}

Padding must have at least footer height + some px for good looking.

Wordica
  • 2,427
  • 3
  • 31
  • 51