0
使用Chrome開發人員工具嘗試識別要在媒體查詢中操作的元素後,我沒有任何運氣讓橫幅響應平板電腦和iPhone的尺寸。這是網址:媒體查詢效果不理想
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; } }*/
代碼多數民衆贊成評論是由我之前的人寫的,當我得到它時它不起作用,而在頂端看到的是我嘗試使用我的工作後的努力。 #video-header和.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&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-->
上帝保佑你丹謝謝。 – Daniel
降低橫幅高度以擺脫較小屏幕的媒體查詢中橫幅上方和下方的空白區域。 –
樂意幫忙! –