<p dir="auto">Challenge <a href="https://beta.freecodecamp.com/en/challenges/responsive-web-design/create-a-media-query" rel="nofollow">create-a-media-query</a> has an issue.<br>
User Agent is: <code class="notranslate">Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0</code>.</p>
<p dir="auto">i get  the following error message: "Your p tag should have the font-size of 10px when the device height is smaller than 800px."</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="    
    
&lt;style&gt;
@media (max-height: 800px) { 
  p {font-size: 10px;}
}
&lt;/style&gt;

&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.&lt;/p&gt;

    ```
    "><pre class="notranslate">    
    
<span class="pl-kos">&lt;</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>
<span class="pl-k">@media</span> (<span class="pl-c1">max-height</span><span class="pl-kos">:</span> <span class="pl-c1">800<span class="pl-smi">px</span></span>) { 
  <span class="pl-ent">p</span> {<span class="pl-c1">font-size</span><span class="pl-kos">:</span> <span class="pl-c1">10<span class="pl-smi">px</span></span>;}
}
<span class="pl-kos">&lt;/</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>

<span class="pl-kos">&lt;</span><span class="pl-ent">p</span><span class="pl-kos">&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.<span class="pl-kos">&lt;/</span><span class="pl-ent">p</span><span class="pl-kos">&gt;</span>

    ```
    </pre></div>
<h4 dir="auto">Issue Description</h4>
<p dir="auto">This is for the feature/curriculum-expansion branch only when run locally, and NOT the staging branch.</p>
<p dir="auto">For several challenges (challengeType: 0, using the code editor with the mobile-phone output layout), the jQuery method .css() doesn't seem to be accessing the styles applied in a <code class="notranslate">style</code> tag in the given code. This is affecting any assert tests that use a pattern of <code class="notranslate">assert($('selector').css('propertyToCheck') == 'valueToCompare', 'message: ...');</code>.Here's an example:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;style&gt;
 h2 {
   position: relative; 
   top: 15px;
 }
&lt;/style&gt;
&lt;body&gt;
  &lt;h1&gt;On Being Well-Positioned&lt;/h1&gt;
  &lt;h2 class=&quot;testCode&quot;&gt;Move me!&lt;/h2&gt;
  &lt;p&gt;I still think the h2 is where it normally sits.&lt;/p&gt;
&lt;/body&gt;
&lt;script&gt;
  console.log($('h2').attr('class')); // Works great, returns testCode
  console.log($('h2').css('position')); // returns undefined
  console.log($('h2').css('top')); // returns undefined
&lt;/script&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>
 <span class="pl-ent">h2</span> {
   <span class="pl-c1">position</span><span class="pl-kos">:</span> relative; 
   <span class="pl-c1">top</span><span class="pl-kos">:</span> <span class="pl-c1">15<span class="pl-smi">px</span></span>;
 }
<span class="pl-kos">&lt;/</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">body</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">h1</span><span class="pl-kos">&gt;</span>On Being Well-Positioned<span class="pl-kos">&lt;/</span><span class="pl-ent">h1</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">h2</span> <span class="pl-c1">class</span>="<span class="pl-s">testCode</span>"<span class="pl-kos">&gt;</span>Move me!<span class="pl-kos">&lt;/</span><span class="pl-ent">h2</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">p</span><span class="pl-kos">&gt;</span>I still think the h2 is where it normally sits.<span class="pl-kos">&lt;/</span><span class="pl-ent">p</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">body</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>
  <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-s">'h2'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">attr</span><span class="pl-kos">(</span><span class="pl-s">'class'</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// Works great, returns testCode</span>
  <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-s">'h2'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">css</span><span class="pl-kos">(</span><span class="pl-s">'position'</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// returns undefined</span>
  <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-s">'h2'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">css</span><span class="pl-kos">(</span><span class="pl-s">'top'</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// returns undefined</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">Related assert tests that aren't passing:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="assert($('h2').css('position') == 'relative', 'message: Add a CSS rule to specify that the &lt;code&gt;h2&lt;/code&gt; has a &lt;code&gt;position&lt;/code&gt; set to &lt;code&gt;relative&lt;/code&gt;.');

assert($('h2').css('top') == '15px', 'message: Use a CSS offset to relatively position the &lt;code&gt;h2&lt;/code&gt; 15px away from the &lt;code&gt;top&lt;/code&gt; of where it normally sits.');"><pre class="notranslate"><span class="pl-en">assert</span><span class="pl-kos">(</span><span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-s">'h2'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">css</span><span class="pl-kos">(</span><span class="pl-s">'position'</span><span class="pl-kos">)</span> <span class="pl-c1">==</span> <span class="pl-s">'relative'</span><span class="pl-kos">,</span> <span class="pl-s">'message: Add a CSS rule to specify that the &lt;code&gt;h2&lt;/code&gt; has a &lt;code&gt;position&lt;/code&gt; set to &lt;code&gt;relative&lt;/code&gt;.'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-en">assert</span><span class="pl-kos">(</span><span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-s">'h2'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">css</span><span class="pl-kos">(</span><span class="pl-s">'top'</span><span class="pl-kos">)</span> <span class="pl-c1">==</span> <span class="pl-s">'15px'</span><span class="pl-kos">,</span> <span class="pl-s">'message: Use a CSS offset to relatively position the &lt;code&gt;h2&lt;/code&gt; 15px away from the &lt;code&gt;top&lt;/code&gt; of where it normally sits.'</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<h4 dir="auto">Browser Information</h4>
<ul dir="auto">
<li>Browser Name, Version: Firefox 48.0.1</li>
<li>Operating System: Mac OS X, El Capitan v10.11.3</li>
<li>Mobile, Desktop, or Tablet:</li>
</ul>