7

bootstrap 3 works on the mobile first approach. so my desktop css is dependant on my css for smaller devices. I would like to disable responsiveness when the desktop browser window resizes but cant figure out how. I was directed to http://getbootstrap.com/getting-started/#disable-responsive which solved half the problem.

the width of the page issue has been fixed by the following 

var desktop = screen.availWidth >= '768';
if(desktop)
{
  l=d.createElement('link');
  l.rel  = 'stylesheet';l.type = 'text/css';
  l.href = 'styles/desktop.css';
  l.media = 'all';
  h.appendChild(l);

}

desktop.css

.container{
    max-width: none !important;
    width:970px;}

but it is still re-flowing my content because bootstrap is still picking up my column classes when the browser window resizes to the respective media query. eg col-sm-4, col-sm-offset-4. i could use javascript to change the col-sm to col-xs when it detects a desktop but offsets and column ordering are disabled for extra small devices.

would i have to write my own css overiding all unwanted boostrap?

http://jsfiddle.net/zVAEe/

please, any suggestions would be greatly appreciated.
thank you in advance.

Anshad Vattapoyil
  • 23,145
  • 18
  • 84
  • 132
TarranJones
  • 4,084
  • 2
  • 38
  • 55
  • 1
    Why don't you just read their docs? http://getbootstrap.com/getting-started/#disable-responsive – Tigran Petrossian Sep 26 '13 at 12:56
  • or try https://github.com/bassjobsen/non-responsive-tb3 – Bass Jobsen Sep 26 '13 at 12:59
  • 3
    possible duplicate of [Bootstrap 3 - non-responsive?](http://stackoverflow.com/questions/18302120/bootstrap-3-non-responsive) – Bass Jobsen Sep 26 '13 at 13:01
  • 1
    It's not clear what the problem is (or why you're writing JavaScript to do something which Twitter themselves say is a CSS/HTML thing). Show us a demo, or tell us what fails with the provided fix. My guess is that you missed or misunderstood a step. – isherwood Sep 26 '13 at 15:04
  • firstly thank you for directing me to the docs which did fix half my problem, i have read them and even though I don't like to read! as i said i could use .col-xs-* but that doesn't help me distinguish between a desktop browser resize and a mobile device. i added a jsfiddle. please feel free to edit as I'm obviously missing something. – TarranJones Sep 27 '13 at 07:43
  • Sincerelly, i've a 2k Ultra-wide screen on my desktop and it's annoying when you do this kind of things. Bootstrap gives you some different breakpoints to use it (remember xs, sm, md, lg, xl). Using different *.css to give different views is about making the job two times. Must use only one (appart from bootstrap), then work on it with classes and media queries for each resolution. But break the responsive layout? No, thanks, even if google stop penalizing your page on indexation due to this bad pratices.. – JoelBonetR Oct 05 '16 at 10:36
  • @JoëlBonetRodríguez agreed. it made me really mad at the time, i was ordered to make a responsive site and after it was complete i got told it shouldn't be responsive when you resize the browser window. i was just looking for a quick fix. – TarranJones Oct 05 '16 at 10:53
  • So it's not correct. It should be responsive Always. Why the hell i've to visit a non-responsive website? What about if i want to take some notes about the text on it and i need to open Word and the webpage at the same time? then i have to scroll because it's not responsive... Should we do this non-user friendly things? Definetely no – JoelBonetR Oct 05 '16 at 10:55
  • if you have to fix it only cuz the client or the boss are brick-minded people, read the device parameters (what you want or need to reach this) using jQuery (for example if you want to rely on width: $( window ).width(); )then perform a .removeClass() using jquery too. its simply and faster, just delete bootstrap classes and let it "as is", you can also change some "X" properties if your structure relies on bootstrap classes (as its usual) – JoelBonetR Oct 05 '16 at 10:59

1 Answers1

1

Yes, you need to rewrite some of the CSS in desktop.css. This is pretty easily done as you could copy CSS from bootstrap's CSS file and just redefine what you want.

I checked you jsfiddle. Add this CSS to desktop.css and it works:

.col-sm-4 {
    width: 33.33333333333333%;
    float: left;
}

.col-sm-push-4 {
    left: 33.33333333333333%;
}

.col-sm-pull-4 {
    right: 33.33333333333333%;
}
Niklaus
  • 991
  • 8
  • 13