Trouble with jumbled text on mobile hero slider

[norrisrk]

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.

[thescriptflow]

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

[TheUntechnickle]

Hey @norrisrk,

Hope you're doing great 🙂

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 <br> 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

[DaisyVo]

Hi @norrisrk  Can you share store url please?

[DaisyVo]

Hi, Can you share store url please?