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

  • Resolved Bri

    (@tinnyfusion)


    7 months ago

    Hi all,

    As per the title, I would like my site logo, title, and tagline to be aligned to the left when viewed on mobile devices so that it mirrors the look of the desktop version.

    Looking within the dev tools of my browser, I can achieve this by de-selecting align-items: center; within the .inside-header tag. However, when adding the following CSS within an @media query within my child themes styles.css file it doesn’t seem to do anything.

    .inside-header {
    align-items: left;
}

    Please help.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • ying

    (@yingscarlett)

    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!

    Thread Starter Bri

    (@tinnyfusion)

    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?

    Thread Starter Bri

    (@tinnyfusion)

    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;
	}
}
    David

    (@diggeddy)

    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.

    Thread Starter Bri

    (@tinnyfusion)

    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.

    David

    (@diggeddy)

    Glad to hear you got it working.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How to align site logo, title, and tagline to left on mobile?’ is closed to new replies.