Melding Bootstrap into a Custom Responsive Design

[lesliekirk]

I'm having some interesting issues trying to meld a custom layout that's not quite responsive (the layout shifts around instead of "responding"). The CSS interfered with the Bootstrap CSS to the point that I had to remove the links to the CSS files in the Base ReadyTheme and have started adding them to a custom.css file. But the responsive divs don't seem to be "responding". The col-xs-12 doesn't work at the small screen size. It stays at the col-md-4. I've tried reversing the order of the classes in the tag, that didn't help. I've made sure that the bootstrap.js file is linked but to no avail. Do I need to put the Bootstrap files into a paired down file and name it bootstrap.css?

Suggestions?

[Bruce - PhosphorMedia]

Its hard to really judge without the specifics--and a lot of investigative time--but I'd say the only path to success with sanity would be to go the other way. Meaning, start with Bootstrap and ADD the other design to it. Unless of course, the other design has its own base layer of responsive controls and at that point, you'd be hard pressed to figure out which one to lead with. Bootstrap is a very base layer of controls/framework. Even the Base Ready Theme has extensions of the bootstrap framework.

[lesliekirk]

Its hard to really judge without the specifics--and a lot of investigative time--but I'd say the only path to success with sanity would be to go the other way. Meaning, start with Bootstrap and ADD the other design to it. Unless of course, the other design has its own base layer of responsive controls and at that point, you'd be hard pressed to figure out which one to lead with. Bootstrap is a very base layer of controls/framework. Even the Base Ready Theme has extensions of the bootstrap framework.

Yes, Bruce, I do agree with you. The problem I will run in to (if I were to go the way both you and I think is the best way to go) is that if any outside changes are made to the CSS file I have been given to use, I would then have to go back to my version of that file and update it. This is not the direction the designer wants to go.

I chose the Base ReadyTheme for it's Bootstrap base thinking it might have been the easiest of the ReadyThemes to meld an outside hand made responsive design. Is there an different ReadyTheme than might play nicer in this type of situation? As, it should be noted, there are a number of external txt files being used for the Global Header, Global Footer, nav bar and a number of other items.