Subscription Buttons not working on desktops larger than 990px

[macrobber]

Using a ReadyTheme, we are having an odd issue with our subscription buttons on the PROD page. If I have a product set up as an optional subscription (meaning not required), the One Time Purchase Button and Subscribe button are not clickable - or rather you click them and nothing happens. What is nuts is that this is ONLY for resolutions over 990px. Under 990 px, they both work - highlight the correct label selected and either display or don't display the Select Subscription drown down appropriately.

I've been going through the CSS with a fine-tooth comb, but I don't see any media states in the theme.css file that would impact this. Is there a hidden javascript file monitoring an OnClick event that I don't know about. I read somewhere that this particular functionality was only via css. But clearly there is a media state that's disabling the OnClick at higher resolutions.

This one is really weird - so I thought I might see if anyone had an idea - as I've run out of them.

[Matt Zimmermann]

Can you post a link to a subscription product with this issue?

[macrobber]

Yes. It is on a development site. I created a 'test' case to try and figure this out. The test product can be found here:

https://devcms.allergybuyersclub.com...-purifier.html

You will notice, it works in resolutions below 980....just so strange.

[Matt Zimmermann]

It appears you have the form elements duplicated on the page with the same ID values. Having multiple elements with the same ID on the page, especially when it comes to triggers in either CSS or JavaScript, will almost always cause complications. My recommendation would be to revisit the layout of your add form and see it it can be made into the responsive version you are looking for instead of hiding/showing one based on the break point.

[lesliekirk]

It appears you have the form elements duplicated on the page with the same ID values. Having multiple elements with the same ID on the page, especially when it comes to triggers in either CSS or JavaScript, will almost always cause complications. My recommendation would be to revisit the layout of your add form and see it it can be made into the responsive version you are looking for instead of hiding/showing one based on the break point.

Hmmmm...I was thinking this was the default page layout with a minor change to the text regarding unchecking the button...I can roll it back if need be...

[macrobber]

Our design has screen elements hidden on small and extra-small screen sizes, and vice-versa for medium and large screens. Basically, there were different 'views' of the element in question. This wasn't a problem until the subscriptions were activated. Because the elements had the same ID, only one was changing. On the medium and large screens, clicking the button was changing the option - just on the hidden element.

It wasn't an issue with the theme - just our design. Thanks for the help all.