Website Logo issues

[Justin Guinn]

Good morning,

I am having an issue with the logo on our site (www.okcfaith.com/faith2015). I have created the logo to the specs specified, however I am getting inconsistent results across different browsers.

I have attached multiple screenshots below, identifying the issue at hand. I’ve made sure to include the current version of each of the three browsers to show that all browsers are up to date. The Logo seems to display properly on Google Chrome, and Safari (No Safari Screenshot), however, IE and Firefox both result in what appears to be the logo expanding beyond its container? …

Placing the image in the “Header” section, rather than the logo section causes me to loose the fade feature when scrolling down on my page. I have updated the theme to the latest version (1.3.3).

Thanks in advance for your assistance.
Faith-IE11.jpg
Faith-Chrome46.0.jpg
Faith-FireFox38.3.png

Attachments:

You must be logged in to view attached files.

[Sushil Adhikari]

Hi Jamie Shirey,

Please use following css to fix your issue:

.logo img {
       width: 100%;
}

Note: Please use custom css plugin or child theme to write the css, so your changes will not lost on theme update.

Thanks

[Justin Guinn]

Sushil,

Here is what the CSS looks like within the themes folder on my end.

.logo img {
width:100%;
}

.logo { display: inline-block; }

.logo a,
.logo img { display: block; }

.logo img {
max-height: 250px;
width: auto;
max-width: 100%;
height: auto;

Everything seems to be as its supposed to be. Plus, if it was out of sorts, it would be across all browsers, not selective … any other ideas?

http://www.okcfaith.com/faith2015

[Justin Guinn]

I’m sure you are busy helping others, any assistance is greatly appreciated it.

[Sushil Adhikari]

Hi there,
I am sorry for the inconvenience!. You can use this following format to write browser specific css.

/*google chrome*/
  /*your css goes here*/  
.logo img {
width: 100%;
}   

/*mozilla firefox*/
@-moz-document url-prefix(){
	
     /*your css goes here*/

}

/*Internet Explorer*/
 @media all and (-ms-high-contrast:none) {
 	
          /*your css goes here*/
  
} 

Note: Please use custom css plugin or child theme to write the css, so your changes will not lost on theme update.

Thank you.

[Author]

Posts