Several issues on mobile device

[Jim Cockerham]

I am seeing several issue on mobile devices.

The add promo code box and gift certificate box close when tapped on before you can enter anything.

PROD screen images do not load at times.
When zooming on an image the x to close is off the screen in portrait mode.

Any help would be greatly appreciated. Here is the site: www.coffeehouseexpress.com

[RTHOMASDESIGN]

Hey Jim,
Site is looking better! Nice job :)

I confirmed the bug on Android... in the base ReadyTheme (it's not just your site). Hopefully Matt can chime in with a quick fix.

Unrelated, but the "sign in" link has a white background on your site -- which looks weird. Also, links in the primary nav take two clicks. Not sure if either of those are intentional.

Can you share a link to a specific product where you're noticing the zoom issue?
-Ryan

[Matt Zimmermann]

Hey Jim,

I'm not seeing the images not loading nor am I able to get a consistent read on the promo code and gift cert boxes. However, when I looked at https://www.coffeehouseexpress.com/p/bpspod.html I was able to see the issue you mention with the zoom. It look like, in the case of this product, that the length of the product name is causing the issue. The quickest solution would be to find ".x-photo-viewer__title" in your extensions.css file and replace "flex-grow: 1;" with "flex: 1; white-space: normal;".

[RTHOMASDESIGN]

Hey Jim,

I'm not seeing the images not loading nor am I able to get a consistent read on the promo code and gift cert boxes. However, when I looked at https://www.coffeehouseexpress.com/p/bpspod.html I was able to see the issue you mention with the zoom. It look like, in the case of this product, that the length of the product name is causing the issue. The quickest solution would be to find ".x-photo-viewer__title" in your extensions.css file and replace "flex-grow: 1;" with "flex: 1; white-space: normal;".

I couldn't replicate the coupon code box error in dev tools, but was able to when using my phone.

[Matt Zimmermann]

I couldn't replicate the coupon code box error in dev tools, but was able to when using my phone.

Hmm, even testing on my device I am not seeing the promo code issue regularity. My thought is that we are looking at a strike zone issue where, if you're too close to the show/hide button, you end up not striking the Apply button. I will see if there is anything I can come up with for a real fix but, for now, you could try adding the class "c-control-group--stacked" to the control group DIV that surrounds the input and button. This will put the Apply button below which should fix the strike zone.

[Jim Cockerham]

Hmm, even testing on my device I am not seeing the promo code issue regularity. My thought is that we are looking at a strike zone issue where, if you're too close to the show/hide button, you end up not striking the Apply button. I will see if there is anything I can come up with for a real fix but, for now, you could try adding the class "c-control-group--stacked" to the control group DIV that surrounds the input and button. This will put the Apply button below which should fix the strike zone.

Matt, I found some JS that you sent me for a problem on another site where the facets were closing too quickly on mobile devices (A11y toggle). I updated that code in the extensions.js and it seems to have fixed the promo and gift cert input box problems too. I will try your fix for the zoom here in a minute.

[Jim Cockerham]

Hey Jim,
Site is looking better! Nice job :)

I confirmed the bug on Android... in the base ReadyTheme (it's not just your site). Hopefully Matt can chime in with a quick fix.

Unrelated, but the "sign in" link has a white background on your site -- which looks weird. Also, links in the primary nav take two clicks. Not sure if either of those are intentional.

Can you share a link to a specific product where you're noticing the zoom issue?
-Ryan

Thanks Ryan - Thanks for pointing out the sign in link. I'm not getting the double click on my end. I'll have to play with a few more browsers.

[Jim Cockerham]

Hey Jim,

I'm not seeing the images not loading nor am I able to get a consistent read on the promo code and gift cert boxes. However, when I looked at https://www.coffeehouseexpress.com/p/bpspod.html I was able to see the issue you mention with the zoom. It look like, in the case of this product, that the length of the product name is causing the issue. The quickest solution would be to find ".x-photo-viewer__title" in your extensions.css file and replace "flex-grow: 1;" with "flex: 1; white-space: normal;".

Perfect! Thanks so much

[Matt Zimmermann]

Hey Jim,

You're welcome. I'll get this pushed as a bug fix in one of the next releases. Thanks for finding it.