Image not displaying in Firefox

  • Hi I added a header image to my homepage of my wordpress site through my ftp in one of the php files. The image shows up on chrome and safari just fine, but not on firefox. Any suggestions on what would be the issue? I’ve uploaded the file in wordpress and used that url, then tried uploading it to a different server and tried that way, but that didn’t work either. I have a feeling that it has something to do with firefox not reading some code to display the image. Any suggestions?

    https://cnjohnson6.com/temp/

    Here’s my code

    ‘<div class=”row”>
    <div class=”col-md-13″ >
    <img src=”../img/header-photo.jpg”>
    <?php
    $image_url=’https://cnjohnson6.com/temp/wp-content/uploads/2014/10/header-photo.jpg&#8217;;
    ?>

    <img src=”<?php echo $image_url;?>”>
    </div>
    <div class=”col-md-12 page-heading text-center”><h1><?php wp_title(”); ?></h1></div>
    <?php if(get_field(“page_subheading”)): ?>
    <div class=”col-md-12 page-subheading text-center”><h3><?php the_field(“page_subheading”); ?></h3></div>
    <?php endif; ?>
    <?php if(get_field(“page_link”)): ?>
    <div class=”col-md-12 page-link text-center”>“><?php the_field(“page_link_text”); ?></div>
    <?php endif; ?>
    </div>’

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi,

    This issue is in your bootstrap.css file

    * {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

    Disabling that or any instances of that you have anywhere else will allow that image to show up in Firefox. You might try just adding a class to that image and use box-sizing:content-box; for that one item.

    Thread Starter cnjohnson6

    (@cnjohnson6)

    Hi! Thanks for all your help. That definitely is the problem, however when I take out that block of code, it affects a lot of other elements on the website. I tried adding a class and using box-sizing:content-box; but that didn’t seem to work either. Any other suggestions?

    No problem. See https://www.brinkhurst.com/help/1.html

    You’ll notice, I just grabbed your code and put the following into the style in the head of the document.

    html body .col-md-13 img {
	box-sizing: content-box !important;
	width:100%;
	margin-top:-45%;
}

    I think there are other layout issues to deal with as well, but hopefully that will get you started.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Image not displaying in Firefox’ is closed to new replies.