Logo looks fine in chrome but not centered in IE

jodeemason

The logo on my page is a banner type- it's centered and looks fine in Chrome, but in Internet Explorer it's off to the right and goes off the edge of the screen.  What do I need to do to fix that?

I have it selected for center stacked.

www.dekeustersgymnastics.com 

Albert

Hi,

it's because your logo is too big. You can make it look better with below css and this is all we can do in with current logo size:

#Top_bar .logo {
    margin: 0 !important;
    padding: 0 !important;
}

#Top_bar .section_wrapper, #Top_bar .container { max-width: 100% !important; }
#Top_bar .container .column.one { margin: 0 !important; }

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

jodeemason

Is there a way I can just make the picture I have as a banner background instead of a logo?

Albert

Yes, you can do this with below css:

@media only screen and (min-width: 1239px) { 
    #Top_bar .menu_wrapper { margin-top: 337px !important; }
    #Top_bar {
    background: rgba(0, 0, 0, 0) url("http://dekeustersgymnastics.com/wp-content/uploads/2015/08/website-banner1.png") repeat scroll 0 0 !important;
    height: 435px;
}
    #Top_bar #logo img { display: none !important; }
}

But please notice that this will work for desktops only. It won't work for mobile devices.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

jodeemason

it's still not looking right- when I put in that last code it made the logo/banner much larger, then the center part was offset, the menu cut into the bottom of it and there was a line showing above it.

I wish there was a way to make it look exactly like it does now- but the the same in IE.

Albert

If this is not good solution then please send us a screenshot of how this looks like on your side and how you wish to look like. Only then we'll be able to check if it is possible.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next