Logo and Header Widget spacing Lifestyle pro

[greenglow]

Hi,
We were having a problem with the rendering on ipad. The same issue is on smaller screens but less of a problem.
The logo was centered on iPad.
I changed this CSS below in the 1023 media query section from center to left and this solved the logo positioning.

.header-image .site-title a {
background-position: left !important;

However there is a large amount of white space below the logo as the header widget moves under the logo on 760, and on 480 the logo and header widget are not aligned-the logo is off to the left and the widget to the right.

I figured I would ask before complicating things more by making incorrect attempts.
Any direction is welcome.
Thanks!

http://maritharney.com/

[jbergen]

Hi,

It looks like the first issue is that the header widget falls below and to the right of the logo at 1023px. To fix that, you can adjust the width of the .title-area (logo) in that media query. If you add the CSS below to style.css at the end of the max-width 1023px media query, the header widget will stay to the right of the logo (and not fall below) on iPad-sized screens.

.title-area {
	width: 50%;
}

Then in the max-width 767px media query, you can make the logo and header widget stack and center by adding/removing the following code:

Remove:

.header-image .site-title a {
    background-size: contain !important;
    float:left!important;
}

Add:

.site-header {
    text-align: center;
}

.site-header .widget-area {
    float: none !important;
    width: 100% !important;
    clear: both;
}

.title-area {
    float: none !important;
    width: 100%;
}

.header-image .site-title a {
    background-position: center !important;
}

I hope that helps!
Jamie

---

Jamie @ Ladebug Studios

[Author]

Posts