Header displays at different sizes in different browsers

Hi there,

I’m building a site with a large header image, displays fine in Firefox and IE. But in Chrome and Safari it displays much smaller. How can I fix this?

Thanks much :slight_smile:

Sandy

Hi Sandra,

I edited your post to keep your login information private. You can select the “Set as private reply” option to keep your information private if you need to post it again.

I’m going to have a look at what is going on. Will get back to you.

Colin

[Content Hidden]

Hi Sandra,

It looks like a browser scaling issue. What I mean by that is, each browser scales over-sized images slightly differently. The actual size of your header image is 1050px x 356px. Explorer is displaying it at that size, but Chrome is scaling it down to 479px x 162px. Which size is your preference?

For some reason, there are none the usual WordPress admin options available in the Dashboard (I suspect the admin level is not high enough for me to access those, or you’re using a plugin to hide them) so I’m unable to check what’s happening with your theme settings.

Can you please confirm the desired header image size and also provide access to your theme settings?

Thanks,

Colin

Hello Sandra and Colin,

This is actually caused by the column container of the logo. If the Header Layout is set to ‘Navigation Bottom’, the entire header above the navigation is divided into 2 columns with a width of 50% each. The left one is for the logo and right one for the Header Content. Now, even if the Header Content is set to none, the width of the right column remains at 50%. What we can do is to override the width of the first column to 100%, then taking out the second column since I presume it is to be left blank. It can be done with these CSS lines:

header.fl-page-header .container .row .col-md-6:first-child {
  width: 100%;
}

header.fl-page-header .container .row .col-md-6:last-child {
  display: none;
}

The first line is to set the first column to a 100%, the second line is to remove the second column.

Ben

Thanks Ben.

That’s exactly what’s happening.

Any idea why IE and Firefox ignore the second column?

Colin

Hi Colin,

I have already encountered this issue a few times but I never thought of figuring it out until you asked. The post here from stackoverflow seems to explain it very well. You might even understand it more than I did :slight_smile:

Ben

[Content Hidden]

Thanks Ben, I’ll give that a go, since I want the larger size header.

No worries, Sandra. Also, if you could reply here if it worked or not that would be great :slight_smile:

Ben

Yes it worked perfectly thanks! I just pasted the code into the custom CSS editor - tadah! :slight_smile: Though I’m not sure about Safari yet, I’ll update when the Safari user reports back to me. Thanks for help, much appreciated :slight_smile: