Centre text on mobile view only - Testament theme

Shopify Discussion

Topic summary

A user seeks help centering text on mobile view only for the Testament theme in Shopify. They provide a screenshot showing the text element that needs adjustment.

A solution is provided with step-by-step instructions:

  • Navigate to Shopify admin → Online Store → Themes
  • Access theme code editor via Actions → Edit code
  • Locate the CSS file (base.css, style.css, or theme.css) in the Assets folder
  • Add a media query targeting screens with max-width 947px
  • Apply text-align: center !important to the countdown heading elements

The CSS targets specific countdown heading classes to center-align text on mobile devices only. A result screenshot appears to be included showing the implementation. The discussion seems resolved with a working solution provided.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

Hi,

Can someone help me center the text below on mobile view only.

Screenshot 2024-10-31 at 14.06.16.png
Screenshot 2024-10-31 at 14.06.16.png1072Ă—926 49.9 KB

P/W: Password

Thanks

1 Like
2

Hi @SaucyPeach

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 749px){
.countdown__heading h3.mb0, .countdown__heading p {
    text-align: center !important;
}
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

2 Likes