[Resolved] Vertical Align Header Elements

[drumelie]

I am showing the site title and tagline (site description) on the left side of the header, which also contains an image widget on the right.

I would like to have the title and tagline be vertically aligned in the header.

I don’t want to use padding, as this does not look right on mobile.

Is there a good way to vertically align the 2 <p> elements containing the site title and tagline?

[drumelie]

I found a solution using padding for desktop:

@media (min-width: 769px) {
.site-branding p.main-title {
padding-top: 20px; }
.site-branding p.site-description {
padding-top: 10px; }
}

[Leo]

Glad you figured out!

[Author]

Posts