Header-right cutting off my custom logo [Metro Pro]

[Salman]

I've modified my header logo from the standard 270x80 to a custom 405x120. But the problem is that whenever I try to put something in my header-right widget area, the header logo gets cuts off a bit to its right.

I believe I should change the header-right widget area settings, but I don't know how. Any pointers?

[Mealtog]

I tested this in Metro Pro and you have to fool around with quite a few settings. I eventually reverted back and stayed with a logo that was max 360 pixels wide.

There is CSS to control:

- Logo area (left header area)
- right header area
- then you may have to edit @media sections to make them mobile friendly

Try and make your logo 350-360 max pixels wide for a quick fix.

[Salman]

Is that the best option I have available?

[ArtsNet]

I am having a similar problem on this site: http://kylemewburn.com/. I have a logo of 430x120px. The problem appears only to occur on resolutions of between 1005 and 1120 pixels. I had amended the CSS to this:

* Widget Area
--------------------------------------------- */
.site-header .widget-area {float: right; width: 300px;}
.site-header .search-form { float: right; margin-top: 16px; width: 100%;}

I only discovered this problem when I used the iPad emulator (http://ipadpeek.com/) to view the site.

I assume I have to tweak the @media CSS. Any advise would be greatly appreciated.

Cheers
Doug

[Author]

Posts