Solved

How can I centre footer text on mobile view?

Beamaway
New Member
5 0 0

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

Accepted Solution (1)

PageFly-Henry
Shopify Partner
1090 312 264

This is an 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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 6 (6)

CodeGearThemes
Shopify Partner
61 2 9

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

 

CodeGearThemes | Shopify & Shopify Plus Expert
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
Email us: info@codegearthemes.com

pawankumar
Shopify Partner
516 67 91

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!


- Need a Shopify developer? Chat on WhatsApp +91-9467121281
- Coffee Tip: Buymeacoffee  | Email: thepkpawankumar@gmail.com
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Best regards,
Pawan
Beamaway
New Member
5 0 0

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
Shopify Partner
516 67 91

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!

- Need a Shopify developer? Chat on WhatsApp +91-9467121281
- Coffee Tip: Buymeacoffee  | Email: thepkpawankumar@gmail.com
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Best regards,
Pawan

PageFly-Henry
Shopify Partner
1090 312 264

This is an 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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Beamaway
New Member
5 0 0

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:)