How can I centre footer text on mobile view?

[Beamaway]

Hi there, 

How can I centre my footer text on mobile view, I've implemented a section from the app "Section Store" which is perfect for my desktop format however the footer text isn't centred. How would I go about centring it? Thanks

Store: https://beamaway.com/ 

Password: Dinho80

[CodegearThemes]

Add this style in theme.css or in theme customizer global style.

@media screen and (max-width: 680px){
[class*="footer-copy-text-sections-"],
[class*="footer-second-top-sections-"],
[class*="footer-second-top-item-sections-"]{
text-align: center;
}
}

[pawankumar]

Hi @Beamaway 
Put the below code in theme.liquid before body closing tag </body>

<style>
@media screen and (max-width: 1000px){
[class*="footer-copy-text-sections-"],
[class*="footer-second-top-sections-"],
[class*="footer-second-top-item-sections-"]{
text-align: center;
margin: auto;
}
}
</style>

Hope my solution will help you resolve the issue.

Thanks!

[Beamaway]

Hi there! Thanks for your prompt response...I've plugged the code in but don't know if its 100% correct. I've attached a screenshot on where I've plugged the code, is it correct. I've then dropped some screenshots below of what the footer looks like now...it hasn't worked completely, how can I get the footer text and everything else centred? Thanks!

[pawankumar]

Hi @Beamaway 
Please replace that css with this

<style>
@media screen and (max-width: 1000px){
[class*="footer-copy-text-sections-"],
[class*="footer-second-top-sections-"],
[class*="footer-second-top-item-sections-"]{
text-align: center !important;
margin: auto;
}
[class*="footer-payments-sections-"] {
justify-content: center !important;
}
[class*="footer-newsletter-text-sections-"] {
text-align: center !important;
}
}
</style>

It will cover most of the cases, if it still doesn't work, Please let me know.

Thanks!

[PageFly-Henry · Accepted solution]

Hi @Beamaway 

This is Henry 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.css

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

@media (max-width: 767px){
.shopify-section-group-footer-group li, p, h3 {

    text-align: center !important;

}
}

Hope that my solution works for you.

Best regards,

Henry | PageFly

[Beamaway]

Perfect! Thanks Henry! Everything is centred now except the submit button and the payment methods, is there any way to centre these two parts of the footer? Thanks again:)