why has this element moved despite css being the same as other pages?

So I was tasked with removing a banner on a certain page in a custom WordPress theme. I assumed of course that in removing this banner it would move everything up. Sure enough there is an H1 element that moved up. I was going to start manipulating the css, but the css is the same as the other pages where there was no banner to remove. The H1 css for those pages are the same.

This is the css:

.page-intro h1 {
padding: 20px 5% 10px;
color: #fff;
margin: 0 auto;
max-width: 1140px;
}

For both the page-warranty-registration.php file and the single-innovations.php file. But the single-innovations.php file had a banner that I removed:

<div id="post-page">

  <?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="640" height="390" 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; ?>

In removing the above code, it caused the H1 element to move up and hide behind the navbar in the single-innovations.php file:

<?php get_header(); ?>


  <?php get_template_part( 'template-parts/content', 'page-intro' ); ?>

  <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>
</div>

<script>
  // 2. This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');

  tag.src = "//www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player1;
  var player2;
  function onYouTubeIframeAPIReady() {
    player1 = new YT.Player('player', {
      height: '390',
      width: '640',
      playerVars: { 'controls': 0, 'rel': 0 },
      events: {
        'onReady': function(event) {
          onPlayerReady(event, 'player')},
        'onStateChange': onPlayerStateChange
      }

But the css for that H1 element is the same as the page-warranty-registration.php that never had a product-video page-banner. So I am not sure if I should just go ahead and manipulate the css in single-innovation.php or if there is a more simple way to resolve this without altering the original code. Any suggestions?

Read more here: why has this element moved despite css being the same as other pages?

Leave a Reply

Your email address will not be published. Required fields are marked *