0

So I've got this website:

When I click Pickup Date & Time, a bootstrap datepicker appears.

This works good enough via Windows/Mac, but the datepicker renders offscreen for mobile components.

This is all heavily baked in to a plugin so is hard to give code example.

Usually, if I had this problem on the Web, I'd play around in Chrome Dev tools and change styles until it works.

However, since this error occurs on mobile devices, I am at a loss on how to approach debugging this in the fastest time possible.

What tools can you recommend for inspecting styles on mobile devices?

What approach would you take to debug such a scenario?

Jack Robson
  • 2,184
  • 4
  • 27
  • 50
  • Although, for that matter, considering it's only the CSS that's giving you issue, simply using a smaller window will have the safe effect. You can use F12 'Responsive' mode to specify the exact required widths if need be, or even select from a list of common widths. – Obsidian Age Sep 25 '17 at 00:49

1 Answers1

0

Chrome and safari both provide excellent mobile debugging tools! As long as you have a mobile device or emulator, you can hook up the device to your computer and use the desktop browser's dev tools to inspect the mobile browser's code:

Safari: https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html

Plug your phone into your computer via USB.

On your phone: settings > safari > advanced > activate the web inspector

On your desktop: Developer > [Choose your phone]

For Chrome, there is something similar in the form of a third-party library: http://people.apache.org/~pmuellr/weinre/docs/latest/

Will
  • 1,171
  • 2
  • 14
  • 26