Jumbotron not showing up on Firefox or Safari.

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.

Also Im going to provide what I have done so far and provide relevant modular code snippets so I am as clear as possible. If I miss anything please let me know.

So Im working on my portfolio site and I have a jumbotron(Bootstrap) which is going smoothly on Google Chrome, but as soon as I switch to Safari and FireFox my jumbotron disappears.

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' ); } } add_action( 'wp_enqueue_scripts', '_cc_scripts' ); header.php: '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>

So things I think I know: - Inline Css isn't cool. The reason I am using it is because I am trying to echo the featured image using a wp query which getting the category name...if that makes sense. - 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.