Minifying CSS disables Jetpack mobile menu

Hi @danescobar – This is the file which handles CSS for Jetpack’s mobile theme: https://github.com/Automattic/jetpack/blob/master/modules/minileven/theme/pub/minileven/style.css

I did look at your site’s source and the CSS appears to be loading fine: https://cld.wthms.co/yalUv

However it looks like something is offsetting your entire theme, this can usually be caused by overlays – if you’ve got any plugins enabled doing this, can you please try disabling it and then try testing the theme again?

Cheers,
Lam

Strange… I’ve disabled; sendinblue plugin (recaptcha overlay), Cookie law info (cookie bar overlay), Contact Form 7 and Popup Maker, Ultimate Social Media Icons which are the only plugins producing overlays in my webpage afaik but the problem persisted.

Pardon the newbie question but is it enough to disable the plugins and delete the cache or do I have to disable css minification in Autoptimize, reenable it and rebuild the above the fold css to test if the problem is gone? In my test I only disabled the plugins and deleted the cache.

Also if I did the test correctly the only other thing I can think is breaking theme positioning is the custom CSS I have on the website for styling a popup and wrap content: here’s all the custom css I use in the website.

EDIT: also I’m trying to resolve this issue in an Autoptimize thread maybe there might be more useful information there that helps with this issue.

• This reply was modified 7 years ago by danescobar.

Pardon the newbie question but is it enough to disable the plugins and delete the cache or do I have to disable css minification in Autoptimize, reenable it and rebuild the above the fold css to test if the problem is gone? In my test I only disabled the plugins and deleted the cache.

I would disable “inline & defer CSS” in AO (so no critical/ above the fold CSS) and troubleshoot there. once all is fine re-enable “inline & defer” with re-generated critical CSS.

frank (ao dev)

@danescobar: Let us know how it goes with what @optimizingmatters suggested. Thanks!

Sure, I’ll update with what I’ve done to solve the problem and mark the issue as solved here if I manage to fix it. For now I had to disable “Inline Above The Fold” in order to fix the theme offsetting issue.

Update: Hi Richard,

I have some news on the theme offsetting issue caused when I introduce above the fold code in my website.

I’ve contacted the developer of the tool that extracts critical css and he said this: “Your server returns different html to desktop and mobile devices. This is not really common practice on the web anymore, and the free critical css generator I am hosting is not setup to handle this. The more common approach would be to serve the same HTML and use media queries within CSS to handle the differences – also known as responsive (mobile-first) design.”

I’m using a Twenty Seventeen child theme. Afaik this theme is not completely responsive for mobile devices that’s why I use your mobile theme. Is there any way to keep my theme HTML handling differences with CSS? Both Twenty Seventeen and Jetpack is managed by Automattic so I assumed they would interact in a responsive way.

Thanks for your attention.

Hi @danescobar, sorry for the delay in getting back to you!

I’m using a Twenty Seventeen child theme. Afaik this theme is not completely responsive for mobile devices that’s why I use your mobile theme. Is there any way to keep my theme HTML handling differences with CSS?

Twenty-Seventeen is already mobile friendly, so I suppose it lost this once you tweaked its CSS on the child theme.

If that’s so, you may also want to add your CSS customisations to your custom CSS editor available under Appearance > Customize > Additional CSS in your dashboard, as opposed to your theme stylesheet, so to see if you’re still getting the same error.

Would that make sense to you?

Thanks @erania-pinnera,

I already had my CSS in Additional CSS. Fortunately past Twenty Seventeen updates made it responsive so I could disable Jetpack’s mobile theme. Before, I remember how the header had responsiveness problems when browsing with mobile devices.

Now it all works as it should except for a flash of unstyled content in my pages. I’ll work further on that.

Thanks for the heads up!

Hey @danescobar, glad to hear you’re working on that and everything is getting sorted! ??

Please feel free to reach out if you have any other questions or need some more help Jetpack wise.

Happy Holidays!