title: Width: 100% not working in portrait on Featured Image in Custom Theme
body: <p>I'm trying to create a fullscreen, mobile friendly theme which displays Featured Images of posts as big as they can be with no cropping. This means in landscape displaying them with <code>height:100%; width:auto;</code>, but in portrait displaying them <code>width:100%; height:auto</code>. (As in many iOS apps.)</p>
  
  <p>Trouble is, I'm having a real bugger of a time getting this to work in WordPress. When I developed the theme as a static HTML test site, it all worked completely fine. But for some reason, when I converted the site to a theme, it started ignoring the width:100% in portrait.</p>
  
  <p>I know it's not the media query itself that is broken/being ignored, because the nav menu which is within the same portrait media query works fine.</p>
  
  <p>Initially I thought WordPress' inline Image sizes had overridden my responsive ones (which would make sense, cascade-wise) but that doesn't seem to be the case as the image displays fine with height:100% in landscape viewports. In portrait, it seems to be listening to the height:auto command.</p>
  
  <p><em>It's literally just the <code>width: 100%;</code> command that is being ignored.</em></p>
  
  <p>I've also added in <code>max-width: 100%</code> just for good measure, and tried it with !important in various places. No effect.</p>
  
  <p>Here's the code so you can see it's not a silly missing semicolon.</p>
  
  <pre><code>#content img {
  width:100%;
  max-width:100% !important;
  height:auto;
  }
  </code></pre>
  
  <p>I have also validated my CSS and nothing seems to be wrong there.</p>
  
  <p>And here's the HTML</p>
  
  <pre><code>&lt;div  id="content"&gt;                 
                 &lt;div title="Click to flip" class="sponsor"&gt;
  
                      &lt;div class="sponsorFlip"&gt;
                          &lt;?php 
                              if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
                                the_post_thumbnail();
                              } 
                          ?&gt;
  
                      &lt;/div&gt;
  
                      &lt;div class="sponsorData" style="display:none"&gt;
                      &lt;?php 
                          if( class_exists( 'kdMultipleFeaturedImages' ) ) {
                          kd_mfi_the_featured_image( 'featured-image-2', 'post' );
                          }
                      ?&gt;      
                      &lt;/div&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;&lt;!-- End div #content --&gt;
  </code></pre>
  
  <p>&amp; here's some screenshots.</p>
  
  <p><img src="https://i.stack.imgur.com/9zG32.png" alt="enter image description here"></p>
  
  <p><img src="https://i.stack.imgur.com/d03Yw.png" alt="enter image description here"></p>
  
  <p>Please, oh please, somebody save me from my portrait problem.</p>