Centre newsletter heading text when on mobile

Store Design
,

Topic summary

A user encountered a styling issue where their newsletter footer heading and paragraph text stopped centering on mobile devices after changing their newsletter API. The subscribe button remained centered, but the “Floating thoughts” heading and “Get a dose of motivation to your inbox” text were misaligned.

Solution provided:

  • Add CSS code to assets/base.css targeting .footer-content__top.page-width.container with text-align: center and align-items: center within a media query for screens with max-width 750px.

Outcome:

  • The solution successfully resolved the centering issue.
  • The user confirmed the fix worked and expressed appreciation for the assistance.
Summarized with AI on November 19. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I have asked a similar question before and got the working answer, but since then I have changed the api for the newsletter and whilst the subscribe box still centres, the heading and paragraph text above no longer does and I cannot work out why. Below is what it currently looks like and I would like the “Floating thoughts” and “Get a dose of motivation to your inbox” to be centered like the subscribe button

Screenshot 2023-06-18 at 12.39.42.png
Screenshot 2023-06-18 at 12.39.42.png956×714 25 KB

Below is the code provided originally and it worked well, but suddenly it’s stopped. I’ve tried to use text-align and align-items to see if that works but no luck. I know it’s going to be super simple, but if anyone can help it would be much appreciated.

@media only screen and (max-width: 750px) {
    .footer__content-top.page-width {
        display: flex;
        flex-direction: column;
    }

    .footer__content-top.page-width .container {
        width: max-content;
        margin: auto;
    }
}

Any suggestions?

My website is: www.quotedvisually.co.uk

Thanks in advance,

Jonathan

1 Like
2

@JHarrisQV

Please add the following CSS code to your assets/base.css bottom of the file.

@media only screen and (max-width: 750px){
.footer__content-top.page-width .container {text-align: center; align-items: center;}
}

Thanks!

1 Like
3

Perfect.

Thank you so much @dmwwebartisan

I appreciate you taking the time to reply and help.

Jonathan

4

@JHarrisQV

Any other help please welcome again I help you.

Thanks!