メディアクエリーに希望の効果がありません

Question

Chromeデベロッパーツールを使用してメディアクエリーで操作する要素を特定した後、タブレットとiphoneサイズに応じてバナーを作成することはできませんでした。これはURLです：

http://thursdaypools.mediafuel.net/innovations/fiberglass-pool-anchoring-system/

あなたはそれのサイズを変更する場合は、バナー画像は、すべてのサイズを変更しないと、私は次のことを試してみましたことがわかります。

@media screen and (max-width: 991px) {   #video-header {   height: 240px;   } } 

/*@media (max-width: 980px) { .banner {  height: 30vh; } }*/ 

コードのthats私の前に誰かによって書かれたコメントアウトされ、それを取得したときに動作しませんでした、そして、あなたがトップに表示されているものは、私が持っていたもので動作しようとした後の私の努力です。 ＃ビデオヘッダーも.bannerも違いはありません。

そのバナーのコードは、このいずれかになります。

<?php get_header(); ?> 
    <div id="post-page" class="single-innovations-page content-area"> <?php get_template_part('template-parts/content', 'page-intro'); ?> 
<!--dancortes added this code below here--> 
<?php get_template_part('template-parts/content','page-banner'); ?>   
    <?php if(get_field('product_video')): ?> 
    <div id="video-header" class="full-video"> 
    <iframe id="player" type="text/html" width="100%" height="100%" src="<?php the_field('product_video'); ?>?enablejsapi=1&amp;rel=0;" frameborder="0" allowfullscreen></iframe> 
<div onClick="closeVideo()" class="close-video">         
<p>Close</p> 
</div> 
</div> 
<?php endif; ?><!--product_video--> 
    <main class="subpage-content"> 
    <div class="medium-wrapper"> 
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
     <div class="innovation-information"> 
     <?php the_field('innovation_information'); ?> 
     </div> 
     <?php endwhile; else : ?> 
     <p><?php _e('Sorry, no posts matched your criteria.'); ?></p> 
     <?php endif; ?> 
    </div> 
</div><!--page-top--> 

Answer 1

は、神があなたにダンを祝福し、あなたに感謝.banner

.banner { 
    background-size: contain; 
}