Center Footer Items on Mobile Only - Lammer Theme

[tinygoatcoffee]

Could someone please explain how to center align the footer menu items on my mobile version of website please? I am using Lammer theme and have tried other solutions suggested for centering but it seems like every theme is different? 

https://trytinygoat.com

Thank you

@members links to members

[harivishwakarma]

Hallo @tinygoatcoffee 

GO to online store > Theme > Action > edit code > Assets > base.css/custom.css

Paste the below code at bottom of the file -> Save

@media only screen and (max-width: 767px) {

.row.pb-5 {

text-align: center !important;

}

.image-content__image-container.logofooter {

margin: 0 auto !important;

}

.site-footer__section .img-logo, .image-content__image-container.logofooter {

    width: 100% !important;

}

}

Hope that my solution works for you.

Best regards,

Hariom vishwakarma

[PageFly-Victor]

Hi @tinygoatcoffee 

This is Victor from PageFly - Landing Page Builder App

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.scss.css.

Step 3: Paste the below code at bottom of the file -> Save

@media only screen and (max-width: 767px) {

.row.pb-5 {

    text-align: center;

}

.site-footer__section .img-logo, .image-content__image-container.logofooter {

    width: 100% !important;

}

}

Hope that my solution works for you.

Best regards,

Victor | PageFly

[GemPages]

Hi @tinygoatcoffee,

Glad to support you today.

To can align center the footer logo on mobile, you can check out my suggestion below to make it:

1. Go to Edit code on Online Store:

2. add my code  above the </body> tag on Theme.liquid: 

<style>

	@media (max-width: 767px) {
		.site-footer .image-content__image-container.logofooter {
			margin: 0 auto !important;
		}
		.site-footer__section .img-logo {
			width: 100% !important;
		}
	}

</style>

Eg:

That logo show like this when you add my code:

I hope you find the answer helpful.

Kind & Best regards,
GemPages Support Team.

[Ujjaval · Accepted solution]

@tinygoatcoffee 
Put below code into theme.liquid file before closing </body> tag

<style>
@media only screen and (max-width: 767px) {
.row.pb-5 {
    text-align: center;
}
.site-footer__section .img-logo, .image-content__image-container.logofooter {
   width: 100% !important;
}
}
</style>

[tinygoatcoffee]

Thank you so much Ujjaval! Your solution worked best because I could find "theme.liquid". I don't seem to have Asset > base.css (or at least I haven't been able to find base.css) so the other solutions centered around base.css didn't work for me. Greatly appreciate you!

[Celina_]

Hi @tinygoatcoffee 

I’m Celina, a freenlance web designer and developer.

You can try this code by following these steps:

1. Go to Edit code on Online Store:

2. add my code  above the </body> tag on Theme.liquid:

<style>

@media (max-width: 767px) {

.site-footer .image-content__image-container.logofooter {

margin: 0 auto !important;

}

.site-footer__section .img-logo {

width: 100% !important;

}

}

</style>

Hope it helps!

Feel free to contact me if you have any questions.

Warmest Regards,

Celina