5 Replies Latest reply: Sep 16, 2013 7:50 PM by jefferis

Watch CSS action in Smartphone?

jefferis Sep 9, 2013 8:02 AM

Hi folks, I'm having a bit of a problem here and maybe someone can help. I have tried to use emulators for cell phones in Chrome and Firefox, but for some reason, the way BC operates, they do not recognize the Default_phone layout, e.g. In Safari, I can use iOS emulator and it works as a smartphone does. But I am having a problem with ONE page on the cell where the "add to cart" button on the Individual Large Item template page form online shopping modules displays only after you tap on the main image or on the like buttons (or basically anywhere on the page).

I have tried to use the inspector in vain to figure out what action is triggering this behavior. I turned off javascript and it still works that way, so I am assuming it might be CSS but I can't track the actions for the tap because either it isn't possible? or I don't know the procedure?

I was wondering if anyone might be able to figure this problem out and show me how you figured it out... ?

To see this problem on a smartphone, go to

http://joden.businesscatalyst.com/diamond-jewelry/diamond-earrings and click on any item with a price. See the detail page and click above the large image on the pinterest button and you should see the add to cart button appear.

TIA much!

Jeff

1. Re: Watch CSS action in Smartphone?

thetrickster888 Sep 16, 2013 4:35 PM (in response to jefferis)

FYI- the best way to test your websites on BC for different browsers without actually testing on the physical device (which is much more accurate) is to use Google Chrome's developer tools and to override the User Agent and Device metrics when you are previewing your site in a browser.

When you are on the page you want to test, goto the Developer tools as usual and then hit the "?" shortcut which will take you to settings on the Developer Tools. Goto the "Overrides" section of the settings pane and you can change the User Agent and then enable device metrics so your browser window resizes to the size of the user agent you switched to. You can also enable emulating touch events on that same screen so that you can see if your sites that use special touch events like swipe work too.

Your problem is probably a minor bug for that phone since it looks ok to me on Webkit (Chrome). What phone are you seeing it on? Do you or a friend have one of these devices you can test on real quick? If so, and you have access to the Creative Cloud you can use Adobe Edge Inspect which will let you run Edge Inspect on your phone and also on your desktop so that when you browse webpages on your phone you can see a developer panel to debug code for what's actually going on with that device.
Like Show 0 Likes (0)

Actions
2. Re: Watch CSS action in Smartphone?

Liam Dilley Sep 16, 2013 4:49 PM (in response to thetrickster888)

thetrickster, that does not actually work in terms of the BC sniffer tag that renders phone, tablet, desktop. You not noticed that? That is what he is refering too.
Like Show 0 Likes (0)

Actions
3. Re: Watch CSS action in Smartphone?

fortunegreen Sep 16, 2013 5:46 PM (in response to jefferis)

Or you could try

http://lab.maltewassermann.com/viewport-resizer/
Like Show 0 Likes (0)

Actions
4. Re: Watch CSS action in Smartphone?

Liam Dilley Sep 16, 2013 7:36 PM (in response to fortunegreen)

Same problem though if you use the BC tags.
Like Show 0 Likes (0)

Actions
5. Re: Watch CSS action in Smartphone?

jefferis Sep 16, 2013 7:50 PM (in response to thetrickster888)

my client was seeing the same behavior on android as I was on iphone 5
Like Show 0 Likes (0)

Actions