Not able to display site title and description NEXT to the logo

Hi Sheila,

Two things here.

First, you’re using a media query in your CSS which is preventing the CSS from being applied to small screens.

Secondly, you’ve moved the navigation out of the header on your site which means that the site info is now 100% wide as it’s the last thing in the header (default theme behaviour).

So change your CSS to this and it should do what you require …

.site-header > .site-logo {
	width: auto;
	margin-right: 30px;
	padding: 0;
	border: none;
}
.site-header > .site-branding {
	width: auto;
}

Oliver

Good Morning and thank you, it looks great on my laptop but didn’t change on mobile. Any thoughts? I appreciate you, thank you.

Looks like the logo is too large for this to work on mobile, so you can do the following instead which sets a smaller width for the logo on smaller screens …

.site-header > .site-logo {
	width: 80px;
	margin-right: 30px;
	padding: 0;
	border: none;
}
.site-header > .site-branding {
	width: auto;
}
@media only screen and (min-width: 482px) {
	.site-header > .site-logo {
		width: auto;
	}
}

Oliver

You are awesome, thank you so much. I just need to try and drop the site title and description down a bit on the mobile view. But I’m sure that’s in the customizer somewhere. Thank you so much for your time, greatly appreciated!
Sheila

actually, maybe it’s not the text size that’s the issue. Is there anyway to tell the logo to be inline with the title/description text?

on mobile only (this issue)

I figured it out by myself! In the code provided above for the siteheader, I substituted the padding line with this and fiddled with the numbers. The padding numbers in the line are for top, right, bottom and left apparently.
Worked like a charm!

padding: 30px 20px 5px 10px;

• This reply was modified 3 years, 3 months ago by Sheila.

Hi Sheila,

Well done. I was going to say that in order for the title / logo to be next to each other, there has to be enough room for them both so reducing the width of either or the padding may also be required.

Glad you figured it out.

Oliver