Reply To: Responsive logo alignment

Ok just got it done.

As mentioned earlier, I first changed the .site-title a on line 2039 –

.site-title a {
    background-size: contain !important;
}

to this instead –

.head-wrap .site-title a {
    background-size: contain !important;
}

Then I changed this on line 4001 from this –

.content,
.site-header .widget-area {
    width: 620px;
}

and replaced it with this –

.content,
.site-header .widget-area {
	width: 60%;
}

^ That covered the widget area space. It changed it from 620px to 60%….which means it covered 60% of the space in the header…..while the logo area covered most of the rest (not including padding/margin)

I also noticed that the logo wasn’t centered due to the size of the image. So I added some code to make it center when viewed in responsive mode. I did so by adding this code around line 2041 –

background-position: center top !important; So in the end, it should look like this –

.head-wrap .site-title a {
    background-size: contain !important;
    background-position: center top !important;
}

I just tested this on an iPhone and everything is working perfectly. The entire logo is showing (without being cut off), and it is also Centered which means it will show up as it should on the iPhone, and any other mobile device (all sizes).

Let me know once you take a look.