Accordion in Footer Not Working on Mobile

Technical Q&A
, , , ,

Topic summary

Mobile footer accordion items on a Horizon theme site would not open on live mobile, though they worked in the theme editor preview. The likely cause was a CSS overlay from the hero section: the class hero__content-wrapper had pointer-events: none, affecting click behavior.

Key fix (CSS):

  • Enable pointer events on the hero wrappers: .hero__media-wrapper, .hero__content-wrapper { pointer-events: auto !important; }.
  • This resolved the issue for the site owner, with screenshots confirming proper accordion behavior on mobile.

Caution and alternative approach:

  • Avoid broad, global changes to theme code, as styles.css may be compiled and a global rule can introduce side effects in hero sections.
  • Prefer adding CSS in the section’s Custom CSS setting to scope changes. One suggestion was to adjust only the relevant wrapper (e.g., .hero__media-wrapper) to control pointer events.

Notes:

  • pointer-events (CSS) determines whether an element can receive clicks; an overlay with incorrect settings can block interactions beneath.

Outcome: Issue resolved with the pointer-events adjustment; discussion continues with a separate layout question in another thread.

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

Hi everyone,

I’m hoping someone can help me out with a strange issue on my website.

On mobile, the footer accordion items won’t open or expand. They don’t seem clickable at all.

However, in the theme editor preview, they work perfectly.

Website: https://phonechase.co

Theme: Horizon Theme

I’ve checked for any obvious CSS or app conflicts, cleared cache, and tested across multiple devices, but the problem only happens on the live mobile view, not in the editor.

Has anyone experienced something similar or knows what could be causing this?

Any help or suggestions would be greatly appreciated!

Thanks in advance.
Marco

2

The CSS class hero__content-wrapper has point-events: none defined. Comment this out in the code (style.css:898) and everything will work.

image
image1139×273 72.5 KB

3

Hey @phonechase,

Thanks for posting this to Shopify community.

In order to make sure when customer click on the Accordion Heading then the accordion opens then you need to follow these steps.

Go to Shopify Admin >> Online Store >> Edit Code >> styles.css

In the end of styles.css paste the following code shared below.

.hero__media-wrapper, .hero__content-wrapper {
    pointer-events: auto !important;
}

Once you paste this code then the accordion will works properly on mobile.

Results:

image
image387×610 60.1 KB

1 Like
4

I would neither recommend touching theme default code nor addin a broad rule like this as suggested above.

This may backfire somewhere else in a “proper” hero section.

You may use suggested rule, but not in your stylesheet (and styles.css is not actually a file in a theme code – it is compiled from styles in {% stylesheet %} clauses.

You may use this code in this section “Custom CSS” setting – this way it will be scoped to this section only and there will be no side-effects.

You can even make it simpler:

.hero__media-wrapper {
  pointer-events: none;
}

BTW – that’s a creative way to configure your footer :clap:

1 Like
5

Thank you so much for the feedback Tim but this isn’t working, and it actually appears to be used already.
This is actually working:
.hero__media-wrapper, .hero__content-wrapper {
pointer-events: auto !important;
}

6

We are more than happy that it’s work for you.

If you need any other help, then feel free to let us know.

Thanks

1 Like
7

Thank you so much! I actually really appreciate it, I was trying everything, even z-index but could not get that to work, they should fix that, as I have not done much customisation to be honest.

Hey, I was wondering if you could help me with this one here:

It really looks awful at the moment. :sweat_smile:

Thank you
Marco