Align text in hero image telephone

Store Design
, ,

Topic summary

Issue: Hero banner text on a Shopify store would not center on mobile devices. The merchant wanted the “10% off all ethernet switches” text centered on phones.

Proposed fix: Add a mobile-only CSS rule via the theme editor.

  • Path: Online Store > Themes > Actions > Edit code > Assets > base.css / style.css / theme.css.
  • Add a media query for small screens (max-width ~480px) targeting the hero text container and set flex alignment to center (justify-content: center) so the text centers on mobile.

Evidence: A before/after screenshot was shared to show the centered result after applying the CSS.

Outcome: The solution worked; the merchant confirmed success and expressed thanks.

Status: Resolved. No further questions or disagreements. Images were provided for illustration but the key change was a simple CSS media query adjustment.

Summarized with AI on December 16. AI used: gpt-5.
1

Hello all,

I am working on a webshop for my business. Now I run into the problem that there is no way I can get the text of the hero on the phone centered.

I have no experience with coding so I can’t figure out how to do that either.

Hopefully you guys can help me!

I have added screenshots here. The website is fielpower.com and the text is “10% off all ethernet switches”.

It would be great if someone can help me!

WhatsApp Image 2024-10-22 at 22.28.03.jpeg
WhatsApp Image 2024-10-22 at 22.28.03.jpeg828×1792 81.1 KB

1 Like
2

Hi @FP6

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: 480px){
.container.wrap_text.flex.h_left.v_middle.text_left {
    justify-content: 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!

1 Like
3

You are awesome!