Trouble with jumbled text on mobile hero slider

Store Design
, , , , ,
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?