@media query trimmed out in published html

[praveend58003379]

i had added this style

@media only screen and (orientation : landscape) and (max-device-height : 320px) { div { border : 1px solid red; } } added in C:\Program Files\Adobe\Adobe Captivate 9 x64\HTML\index.html and when its published it trimmed @media ?

Why..any idea ?

[TLCMediaDesign]

Which type of project are you using?

Responsive?

HTML5 or SWF or both?

[praveend58003379]

publish to my computer dialogue box details:

     publish as html5/swf

     output format html5

          ticked yes for scalable html content

          resolution 1024*627

[TLCMediaDesign]

So to be clear, just HTML5 not SWF?

Also, are you publishing to SCORM?

[praveend58003379]

Correct , only html5

[TLCMediaDesign]

That is the file you should be editing. Mine works just fine. There is also a win8index.html file, but it is not used on my Win8 machine.

Can you post the header of your file? Down to function onBodyLoad()

[praveend58003379]

[TLCMediaDesign · Accepted solution]

I think it is because Captivate uses the @ symbol to designate dynamic attributes when it publishes. For example <title>@MOVIETITLE</title>

You may have to add it with JavaScript and mask the @ symbol.

http://modernweb.com/2014/03/24/using-media-queries-in-javascript/

[TLCMediaDesign]

Also be aware that CP has @media all and (max-width:335px) in the CPLibraryAll.css

[praveend58003379]

[TLCMediaDesign]

It may be using a different file since you are publishing to SCORM.

Try:

C:\Program Files\Adobe\Adobe Captivate 9 x64\Templates\Publish\LMS\Standard\SCORM\Default\2004\Default_HTML5.html or default.html