Controlling Captivate – Bookmarking
January 5, 2015
3 Ways to Use Custom Color Palettes in Captivate That YOU Have to Check Out
September 11, 2015
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.
Click here to download 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 your 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!
