Plugin Settings Page not Usable on Mobile Devices

[ricsmo]

The plugin settings page does not resize small enough on some mobile browsers and the "Clear Cache" button is off screen and not scrollable. Tried on iPhone 6 using Safari and Chrome in both portrait and landscape.

[raamdev]

@ricsmo Thank you for opening an issue for this. I'm aware of the problem with using the Comet Cache options pages on mobile devices, but I kept forgetting to open a GitHub issue so that I'd remember to get that fixed. :-)

We have another GitHub issue open to simplify the plugin options page itself (see #96) and working on this (improving mobile compatibility) would definitely be part of that work.

However, I'll leave this GitHub issue open and see if there are a few simple tweaks we can make to improve mobile layout for the next release.

[renzms]

@raamdev

Before Using Media Queries:

Mock up using Responsive Design - Media Queries:

@media (min-width: 480px) and (max-width: 1023px)

Changes made

• Images auto adjust depending on width of screen. Mock set at 90% of screen width (480px) Noting that we would need to make different parameters for Tablet (768px) and mobile(480px), horizontal/vertical (480/1024px), and retina media query.
• Header menu items/links/buttons adjusted and centered.

Plugin options for drop downs are visible, but fields are smaller.

Though its still possible to scroll left and right within field, this could be solved with media query for font size if needed.

[jaswrks]

@renzms That looks like a fantastic start on this. Do you have that work (seen in the screenshots above) in a separate branch that you can push for a review?