Controlling Captivate – Media Queries

Welcome to another installment of TLC Media Design’s Controlling Captivate series. Today we’ll show you how to use one of the best features of CSS3, the Media Query. In this simple demonstration we’ll show you how to hide the CC close button in a CP8 responsive project.

Captivate does not always respond the way we would hope or desire. Sometimes it’s necessary to add additional code to resolve bugs and/or issues. In a recent forum post, a Captivate user was having an issue where the close button in the upper-right of the closed captioning box was covering the cc text in a “phone” view. To solve this, we agreed that we would just “turn-off” the button in that particular view, but show it in all other views. To do this we need to use the CSS3 @media Query.

The beauty of using the media query is in its simplicity and usefulness in responsive design. To implement a media query for this example we need only the CSS media query and the ID of the div element for the CC close button. We get the ID from the index.html page which is “ccClose”. By inserting the following CSS in the head section of the index.html document, we can control the visibility of the button. This example will hide the button of the screen width is under 501 pixels.

<style type="text/css">
@media screen and (max-width: 500px) {
    #ccClose {

Click here to see a demo of the media query in action. Resize the window and watch the close CC button appear and disappear.

Want to just hide it period? You can just add the following CSS to the end of the assets/css/CPLibraryAll.css file.

#ccClose {display:none;}

This is not the only thing you can do with media queries. You could also change fonts between views, change colors, even better yet…prevent upward scaling of HTML5 and swf projects. Interested? Contact TLC Media Design today to work out a solution that’s right for your project.

We’re trying to build up our following on our LinkedIn page. Please click below to help us out!