How to align site logo, title, and tagline to left on mobile?

Hi there,

Try this CSS:

@media(max-width: 768px) { 
.inside-header.grid-container {
    justify-content: flex-start;
    flex-direction: row;
}
.site-branding-container {
    flex-shrink: 1;
}
}

Let me know if this helps!

Hi Ying,

I just tested the CSS on my local dev site and it didn’t appear to make any changes to the positioning when adding it to my child themes style.css file. However, when adding it directly to the customiser it did work..

I have cleared the local cache but still have the same issue.

Any ideas?

The CSS you suggested has been placed on the live site with the same results.

If I add it to an existing @media query like so then it doesn’t work:

/* Mobile menu */
@media (max-width: 768px) {
	/* Style contact button */
	.main-navigation .main-nav ul li.contact-button a {
		margin-top: 10px;
		margin-bottom: 10px;
		width: 93px;
    }

	/* Move site logo, title and tagline to the left */
	.inside-header.grid-container {
		justify-content: flex-start;
		flex-direction: row;
	}
	.site-branding-container {
		flex-shrink: 1;
	}
}

However, I have found that if I add it to it’s own query it works?! What am I missing here. Surly it shouldn’t make a difference if I add it to an existing @media query?

/* Mobile menu */
@media (max-width: 768px) {
	/* Style contact button */
	.main-navigation .main-nav ul li.contact-button a {
		margin-top: 10px;
		margin-bottom: 10px;
		width: 93px;
	}
}

@media (max-width: 768px) {
	/* Move site logo, title and tagline to the left */
	.inside-header.grid-container {
		justify-content: flex-start;
		flex-direction: row;
	}
	.site-branding-container {
		flex-shrink: 1;
	}
}

Hi there,

I see only the one @media query rule loading on your site as per your first CSS rule example in the last reply, and that CSS is being applied.

Hi David,

My apologies for the delay replying.

Yes I combined the new CSS again as there is no valid reason for it not to work. I then looked elsewhere for what could be causing the issue.

Although I didn’t have any automatic caching plugins installed, I did find that there was still some minified css on the server from a previous installation. Once this had been removed it then worked.

Thanks both for your help.

Glad to hear you got it working.