[MOTION THEME] How to center the footer logo on mobile view?

Store Design

Topic summary

A user seeks help centering their footer logo specifically on mobile devices, as they’ve already achieved this for desktop view. An attached screenshot shows the logo currently positioned on the left side in mobile view.

Two solutions have been proposed:

Solution 1 (oscprofessional):

  • Add CSS code to the theme.css.liquid file:
.footer__logo-social {
    display: inherit;
}

Solution 2 (LitExtension):

  • Insert media query CSS targeting screens up to 768px width
  • Modifies header-item and site-header__logo classes
  • Uses properties like order, width, and margin: auto

Both responders requested the store URL to provide more precise solutions. GemPages support team also offered assistance but needed the store link. The user thanked the community but hasn’t yet shared their store URL or confirmed which solution worked.

Status: Awaiting user feedback on implementation.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

I’ve already centered the logo in the footer but just in desktop view, i would like to make it also for mobile.

As you can see, its positioned on the left

Screenshot_2022-12-20-13-56-48-048_com.android.chrome.jpg
Screenshot_2022-12-20-13-56-48-048_com.android.chrome.jpg1440×3200 359 KB

2

@userwithoutname ,

Share the store URL…

3

Hello @userwithoutname

It’s GemPages support team and glad to support you today.

To provide you with the most precise solution in this case, could you please share the store link?

4

Thank you!

5

@userwithoutname

.footer__logo-social {
    display: inherit;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

6

Hi @userwithoutname ,

Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:

@media only screen and (max-width:768px){
	.header-item--logo {
		order: 1;
	}
	.site-header__logo {
		margin: auto !important;
	}
	.header-item {
		order: 0;
		width: 110px !important;
	}
	.header-layout--left-center .header-item--icons {
		order: 2;
	}
}

Hope it helps!