Responsive logo alignment

@bocafit Since everyone has a different sized logo, the same code probably won’t work. To start, you can add this to your css –

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

Then I would have to see what it looks like in order to see what to do next,. You don’t have to use the exact size that is added in the theme, you can actually use whatever size you want. Did you want a larger or smaller sized logo? Just let me know.

Also, this type of question has already been answered here in the forum, so if you do a search you’ll be able to see the code I posted above and a few other things that can help you with any issues you have.

@bocafit I usually recommend the code that was posted above by Eric. If you do a search in the forum you’ll see more posts that cover different things you can do to adjust how your logo looks in Genesis…..This is how it works in all Genesis themes.

I just checked your site, and scanned your CSS file, but I don’t see the code. Are you sure you added it to your CSS?

Also, once you do add it, you’ll still need to adjust the title-area CSS when the site is in responsive mode. When your browser is adjusted, or when it is viewed on a smaller device, it activates the responsive CSS at the bottom to override the code that is used for the desktop version. At the moment the width is at 300px on line 4103 –

	.sidebar-primary,
	.title-area {
		width: 300px;
	}

^ So once you change that to whatever size you prefer your logo to be, including the code mentioned above, then it should work.

I have an iPhone and an iPad so I can check your site once you make the adjustment to make sure everything is working…..Or since it’s a simple fix, I can login for you and make the adjustment directly. Just let us know

@Genghis7777 you can fix your issue by adding the following code to your responsive section –

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

That should center it…..however, your image itself needs to be centered. If you open it in photoshop you’ll see that it is off to the left and there is some transparent space on the right side. So once even out both sides and remove the extra space it will center perfectly.

@Wes

The code Eric recommended is on line 2040 in the css file. We tried making the logo 300px, which would be 300×137, but the theme is resizing it to 360×164 when we upload it. See Dashboard -> Appearance -> Header. Surely we can’t be the only ones having this issue.

Thank you. If you could log into our website to help us that would be great. Please let us know how to get you that log in info…

The link for the logo is: https://www.smylrlive.com/wp-content/uploads/2015/01/logo1.png)

@Genghis7777 Just wanted to make sure you saw my reply above? I know this was originally your thread and everything kind of got mixed up with other posts/questions, so I just wanted to check and make sure you were able to get everything working since you were first.

I don’t want you to think we forgot about you or anything 🙂

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.

@Mike Do you have a link to your site?