Jumbotron not showing up on Firefox or Safari

Question

I just want to start out by saying, that I have tried multiple things before I resorted to writing this entry. You guys are my only hope.

My site works in Chrome, but disappears in Firefox or Safari.

Things I have tried:

  • Added register script then enqueue; In hopes that my grid-12.css is loaded before frontstyle.css(grid-12.css has jumbotron code; bootstrap.css just has my modal.)
    • Moving the end of my while/endif; wp_reset_postdata to the bottom of my jumbotron.
    • Put my jumbotron as inline css instead of in the style sheet.(currently); Splitting the css does not work for some reason.
    • Put jumbotron in front-style.css(main stylesheet)
    • Making grid-12.css a dependency of my front-style.css(currently)
    • And a few other things….

function.php:

function _cc_scripts() {

  wp_register_style('grid_12', get_template_directory_uri() .  '/inc/css/grid12.css');
  wp_register_style('normalize_css', get_template_directory_uri() . '/inc/css/normalize.css');
  wp_register_style('bootstrap_css', get_template_directory_uri() . '/inc/css/bootstrap.css');
  wp_register_style('front_css', get_template_directory_uri() . '/inc/css/front-style.css', 'grid_12');
  wp_register_style( 'main_style', get_template_directory_uri() . '/style.css');
  wp_register_style('animate_css', get_template_directory_uri() . '/inc/css/animate.css');
  wp_register_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css', array(), '4.6.1' );
  wp_register_style( '_cc-style', get_stylesheet_uri() );
  wp_register_style( '_cc-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );

  wp_enqueue_style('grid_12');
  wp_enqueue_style('normalize_css');
  wp_enqueue_style('bootstrap_css');
  wp_enqueue_style('front_css');
  wp_enqueue_style('main_style');
  wp_enqueue_style('animate_css');
  wp_enqueue_style('font-awesome');
  wp_enqueue_style('_cc-style');
  wp_enqueue_style('_cc-skip-link-focus-fix');


  if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
    wp_enqueue_script( 'comment-reply' );
  }
} // End of _cc_scripts()
add_action( 'wp_enqueue_scripts', '_cc_scripts' );

header.php:

<?php
$args = array(
'category_name' => 'jumbotron',
);
$the_query = new WP_Query( $args );
?>

<?php 
if ( have_posts() ): 
  while ( $the_query->have_posts() ):   
    $the_query->the_post(); ?>

    <?php
    $thumbnail_jumbo  = get_post_thumbnail_id($post->ID);
    $featuredImage = wp_get_attachment_image_src( $thumbnail_jumbo , 'full');
    $thumbnail_jumbo = $featuredImage[0];
    list($width, $height) = getimagesize($thumbnail_jumbo); 
    ?>

    <div class="jumbotron">
      <style type="text/css">
        .jumbotron {
      background: no-repeat center right fixed  url('<?php echo $thumbnail_jumbo ?>');
     padding:0;
     margin-bottom: 0px;
     max-width:100%;
     min-height: 500px;

     background-size: 100%;
     box-shadow:0px 0px 10px #000;
       -webkit-background-size: 100%;
         -moz-background-size: 100%;
           -o-background-size: 100%;
     background-size: cover;
       -webkit-background-size: cover;
         -moz-background-size: cover;
           -o-background-size: cover;

        }
        </style>


        <div class="scroll-down text-center  hidden-sm hidden-md hidden-lg">
        <a href="#" class="about"><span class="icon-down">
          <i class="fa  fa-chevron-down fa-3x"></i></span>
        </a>
      </div>
    </div>
    <?php 
  endwhile; 
endif; 
wp_reset_postdata(); 
?>

Other things to note

  • I’m trying to avoid inline CSS.
  • Custom Css needs to be loaded after Bootstrap.css(in this case grid-12.css)

Right now, on Safari/Firefox, I can see the color of the picture/jumbotron behind my navbar but it does not stretch and take up the space I want it to.

Thanks any advice on this would be great.

--------------------------------------------------

>>> Share a link to this question, just copy and paste the code bellow on your web page <<<

<a href="https://www.wptricks.com/question/jumbotron-not-showing-up-on-firefox-or-safari/">

Jumbotron not showing up on Firefox or Safari</a>
0
carlcreative 2 weeks 0 Answers 14 views 0

Leave an answer