Jetpack Mobile Theme: how to add Custom CSS

[sdpate48]

The Mobile Theme in jetpack contains some not mobile CSS - like line spacing on h1, h2 and content. The h2 is 2.5 which makes the sub-headers on a post huge on a tiny smartphone screen. Picture captions are given large spacing and the content is at least 1.5.

Site owners can modify the CSS but each time there is a Jetpack update, they lose the changes and have to re-enter.

The standard CSS should be changed to reflect the need for concise pages on small devices.

It would be very helpful to add a "Custom CSS" feature for Jetpack mobile to allow site managers to modify CSS in a sandbox that is not modified with each Jetpack update.

Thanks. S. Pate

[jeherve]

The Mobile Theme in jetpack contains some not mobile CSS - like line spacing on h1, h2 and content. The h2 is 2.5 which makes the sub-headers on a post huge on a tiny smartphone screen. Picture captions are given large spacing and the content is at least 1.5.

Would you mind posting a link to your site, some screenshots of this problem, and let me know your smartphone model and OS, so I can try to reproduce?

It would be very helpful to add a "Custom CSS" feature for Jetpack mobile to allow site managers to modify CSS in a sandbox that is not modified with each Jetpack update.

You can actually use Jetpack's custom CSS module to do that. In your dashboard, go to Appearance > Edit CSS, and enable the Mobile compatible mode. Once you have done so, your custom CSS changes will be loaded in the Mobile theme as well.

You can then create your own custom CSS for the mobile theme by using the .mobile-theme class to target only the Mobile Theme.