HORIZON THEME ERROR: Please Fix Soon!

Technical Q&A

Topic summary

A Shopify store owner reported a mobile alignment issue with the Horizon theme’s gift card product options. Specifically, the “Recipient’s email” text appears left-aligned rather than centered on certain mobile devices, particularly when text size is adjusted.

Key Details:

  • The issue is device-width and text-size dependent
  • Affects iPhone 11 Pro and similar devices
  • The gift card form options are auto-generated by the theme and not directly editable

Resolution Provided:
A CSS fix was shared to center the text:

label.gift-card-form-option__button-label {
  text-align: center;
}

Implementation Options:

  1. Add code to base.css or theme.css via Theme Editor
  2. Alternatively, paste into Custom CSS tab under Theme Settings

The solution was confirmed to resolve the alignment issue on mobile devices. The user also expressed interest in customizing the default language of these options (e.g., “Email to:” with “Me” and “Recipient” options), though this wasn’t directly addressed.

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

I notice that (as you can see in the screenshot) the ‘Recipient’s email’ option is not centred on mobile. These options are automatically added by the Horizon theme for gift card products and not editable. It would be great to make them customisable. I might prefer language like: “Email to:” with options “Me” and “Recipient”.

Screenshot 2025-09-01 at 16.19.33
Screenshot 2025-09-01 at 16.19.33730×1120 47.9 KB

2

Hello @3rdDay ,

I hope you are doing well!

Basically, it requires changes in the text and CSS. Can you please provie me the store URL and collab code so that I can make the changes for you.

Please note: The collab code is private and secret. Also, this needed to be sent in private to the personal message. Feel free to message me.

3

@3rdDay Hey, thanks for posting here.
I had checked, but there was a missed option.
Can you please share the link so we can inspect or add options to this? Thanks

image
image472×498 19 KB

4

Hi, sure, it’s https://3rdday.co.uk/gift-card

5

Thanks for sharing the link. I have checked and confirmed that the text is centered.

image
image540×601 28.5 KB

Can you please confirm if you are still able to see the text in left or can you please confirm which device you are using? I think it’s device specific issue.

6

Thanks for your response. Yeah, it looks like it depends on your device width and text size. If you increase text size, you’ll notice the alignment of the text becomes left-aligned. I checked again and mine still has that issue despite text size being 100%, using an iPhone 11 Pro.

7

Okay! Please copy and paste the below code to the top of base.css or theme.css. To find base.css or theme.css, go to Online store >> Themes >> Edit code and search for either base.css or theme.css

Alternatively, if the code didn’t work, copy and paste the code below by going to the Online store >> Themes >> Customize >> Click on Settings icon to the left >> Scroll down to the bottom and paste it to the custom CSS tab.

label.gift-card-form-option__button-label {

text-align: center;

}

After the changes, it will appear like this-

image
image480×826 54.5 KB