0

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.

0

Maybe you CSS code is confusing the other browsers. First you are using the prefixed properties after the unprefixed ones, I would inverse that. Secondly you are using the background shorthand property with the values in uncommon order. I think there are browsers out there, which expect them in specific order.

.jumbotron {
    background: url('<?php echo $thumbnail_jumbo ?>') right center no-repeat fixed;
    padding:0;
    margin-bottom: 0px;
    max-width:100%;
    min-height: 500px;
    box-shadow:0px 0px 10px #000;

    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
  • Okay, so is my CSS fine the way it is?(being inline?) I've tried putting in a regualar stylesheet but with no success. Im going to change this later and will let you know if this fixes the problem. And what do you mean by prefixed properties? Do you mean the -webkits-? – carlcreative Nov 13 '16 at 18:03
  • @carlcreative Yes, the prefixes like -webkit- are vendor-prefixes for older versions of these browsers. Such properties should always be listed before the coresponding unprefixed variant. – JHoffmann Nov 13 '16 at 21:34
  • Hey thanks man! It def works on Safari and Firefox! The issue now is that on mobile nothing appears. The red in the image shows but can seem to get the rest of the picture in there. The website is [link] (carlcreative.com). Check it out and let me know. Its kind of strange. Its like Filezilla isn't updating my site or something funny is happening. – carlcreative Nov 14 '16 at 1:31
  • Is there some kind of limitation as far as the jumbotron not working on Safari properly? Cause thats the only thing I can come up with. @JHoffmann – carlcreative Nov 14 '16 at 1:32
  • @carlcreative There are known issues in iOS Safari when using background-size: cover in combination with background-attachment: fixed. See caniuse (Known issues tab) – JHoffmann Nov 14 '16 at 9:29
0

It's because you had a bunch of errors inside of your header.php.

Three important things to note:

  • You shouldn't add <style>-tags inside of the loop, since that would add the styles several times, if the loop runs more than once.
  • An the most probable reason, why it broke was that you had this line here: <i class="fa fa-chevron-down fa-3x"></i></span> (without a start-span-tag).
  • And why it works in Chrome and not in Firefox/Safari, is because different browsers are forgiving in different ways (and handle flawed code differently).

Try replacing your code in header.php with this:

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

    <?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">
          <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>
            </a>
          </div>
        </div>
        <?php 
      endwhile; 
    endif; 
    wp_reset_postdata(); 
    ?>

Aaaaand... If you another time, properly indent your code when you ask a question in here, then it's easier to find a solution to your question, since the question is easier to read. It's just one of those things, you know. =D ... This comment is said with love.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.