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!
Not something I deal with but there are site and CCS LINT or checkers you can toss your code at and see what comes out.
https://www.google.com/search?q=css+checker
The awful truth is when it's not your code, it's more likely to break and you get to invest the weeks to figure out what happened.
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.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.