Centering Footer Headings for Mobile View Only

Store Design

Topic summary

A user seeks to center footer headings exclusively on mobile view without affecting desktop layout.

Initial Problem:

  • Attempted CSS code centered headings on both mobile and desktop screens
  • Needed mobile-only solution using media queries

Solution Provided:
Two approaches were suggested:

  • Correcting the media query syntax for .footer-block__heading with max-width: 749px
  • Adding CSS code to theme.liquid file above the </head> tag

Resolution:

  • The corrected media query code worked successfully
  • Solution required implementation in theme editor’s custom CSS settings rather than base.css file
Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I have tried to center these headings before, but they apply for desktop and mobile. I only need it centered for mobile view. Does anyone know how to do this?

code I tried that worked (but it applied to both screens):

@media screen and (max-width: 749px)
.footer-block__heading {
text-align: center;
}

my website: www.melaniejean.com

Thanks

Screen Shot 2024-02-05 at 4.57.53 PM.png
Screen Shot 2024-02-05 at 4.57.53 PM.png998×1234 54.2 KB

2

Because your code incorrect, please update code to this and check again

@media screen and (max-width: 749px) {
.footer-block__heading {
text-align: center;
}
}
3

@mjdubarr

This is Theodore from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Hope this can help you solve the issue

Best regards,

Theodore | PageFly

4

@Dan-From-Ryviu hi thank you. it works but not in base.css. It worked in the theme editor theme settings custom css