Trouble with jumbled text on mobile hero slider

Store Design
, , , , ,

Topic summary

A user is experiencing text display issues on their homepage hero slider’s mobile view using Shopify’s Align theme. The text appears jumbled with awkward hyphenation and line breaks, and the H1 font size cannot be adjusted through the Shopify customizer.

Proposed Solutions:

  • Adjust mobile typography settings in the theme customizer (Online Store > Themes > Customize)
  • Add custom CSS to disable hyphenation and control font sizing for mobile screens (max-width: 768px)
  • Simplify heading text or manually insert line breaks using <br> tags
  • Check for available theme updates that may address mobile responsiveness

Current Status:
Multiple community members have offered assistance but are requesting either store access credentials or the store URL to provide specific solutions. The issue remains unresolved pending additional information from the original poster.

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

I am having trouble with text on the mobile view of my header slider on the homepage. All of the text is getting jumbled up and I’m unable to fix the H1 font size in the Shopify customizer. I am using the Align theme.

1158432516c56c2028b69d6bcf83542a_exif.jpg
1158432516c56c2028b69d6bcf83542a_exif.jpg1284×2778 224 KB

09721069ca03d2f39e7126505bbe52b5_exif (1).jpg
09721069ca03d2f39e7126505bbe52b5_exif (1).jpg1284×2778 199 KB

2

Hey @norrisrk I hope you are doing well. I am Qasim ready to help you.

In order to fix the fix required to take a look in your theme file. Could you please share the password of your store so that I take a look and provide you solution code.

Thanks

3

Hey @norrisrk ,

Hope you’re doing great :slightly_smiling_face:

Since you’re using the Align theme in Shopify, here are some solutions to fix this issue:

  1. Adjust mobile text settings in theme customizer:

    • Go to Shopify admin > Online Store > Themes > Customize
    • Navigate to the header section or slider settings
    • Look for mobile-specific typography options
    • Try reducing font size for mobile displays
    • Disable auto-hyphenation if that option exists

  2. Add custom CSS to prevent hyphenation:

    @media only screen and (max-width: 768px) {
  .header-slider h1,
  .header-slider .h1,
  .slideshow__title {
    hyphens: none !important;
    word-break: normal !important;
    white-space: normal !important;
    font-size: 28px !important; /* Adjust size as needed */
    line-height: 1.2 !important;
  }
}

  3. Simplify heading text:

    • Consider using shorter phrases that don’t require breaking
    • Split content into two lines using
      tags where appropriate

  4. Check theme updates:

    • The Align theme might have updates available that address mobile responsiveness issues

Let us know if you want us to do this for you, we’d love to.

Cheers!
Shreya | Untechnickle

4

Hi @norrisrk Can you share store url please?

5

Hi, Can you share store url please?