0

Inherited this page, a mashup of an HTML5Up template called Strongly Typed trying to work inside our content management system, which runs on Bootstrap. Though we cannot edit the stylesheets bundled with our CMS, we can override via inline declarations & custom page-level CSS; the page in question has the template's CSS & JS transplanted in.
At a viewport width of 736px the two-column layout slims to one column, but at the same time the photo carousel "disappears." Or it seems to: in browser's developer console I see that what's really happening is the box balloons in size to a ridiculous width & height, 1,000s and 1,000s of pixels!
Goal is simply to get it functioning ASAP--that is, the carousel properly scaling down (as it does on this page).
I'm wondering if you know of some tools in either the Chrome or the Firefox console that are ideal for figuring out the culprit conflicts/redundancies in a hodgepodge like this?
Thanks for your help or advice!

Edited by Ryujin: wrong word

2
Contributors
2
Replies
19
Views
6 Months
Discussion Span
Last Post by Ryujin
1

Okay, threw out the CSS and started from scratch with the stock CSS of the Strongly Typed template. Guess what? Carousel works at all resolutions under that. So now am selectively restoring chunks of the old custom CSS.
In retrospect, I wish I'd done that from the start, instead of trying to fix what was broken--this is turning out to be much easier & faster.

Votes + Comments
Similar to trying to touch up a bad paint job. It never looks right.
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.