1

I'm using bootstrap and I have <div class="container-full"> on desktop, but this class should be replaced with <div class="container-fluid"> on mobile.

Thing is that container-full have some weird right padding on iOS devices and container-fluid does not. But I need container-full for desktop version.

Anyhow I believe this could be achieved with some jquery but I can't find good one.

thank you

1
  • 1
    Instead you can write media query for mobile devices and update css for the div.
    – Sahil
    Nov 23, 2015 at 13:28

2 Answers 2

3

You should try to add a media query like @Sahil commented: (Add the overwriting class after fluid or full)

// max-width: 768px (xs) max-width: 992px (md)
   @media(max-width: 992px) {
        .container-full-and-fluid {
            padding: 0px !important;
        }
   }
1

i guess you can do like this

 if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
        $('div.container-full').addClass('container-fluid').removeClass('container-full');
    }

or like this

if(screen.width < 800 /*some amount that should be a mobile's phone screen width probably*/ ){
  $('div.container-full').addClass('container-fluid').removeClass('container-full');
}
1

Not the answer you're looking for? Browse other questions tagged or ask your own question.