Css modification for mobile

I got this working with latest version of Zammad (3.5.x). This makes it responsive on mobile devices and also allows it to act as a Progressive Web App on iOS after adding it to the Home Screen (rather than opening as another tab in the browser). It’s still kinda buggy and not perfect, but I think it’s at least usable until a proper responsive release of Zammad is out.

Here are the steps:

  1. Create /opt/zammad/public/assets/custom-mobile.css and paste contents of kazz3m/zammad-mobile-css

  2. Modify /etc/nginx/sites-enabled/zammad.conf and add the following under location / section:

     sub_filter '</head>' '<link rel="stylesheet" href="/assets/custom-mobile.css"><meta name="apple-mobile-web-app-capable" content="yes"></head>';
     sub_filter '<meta name="viewport" content="width=1024">' '<meta name="viewport" content="width=device-width, initial-scale=1.0">';
     sub_filter_once on;
    
  3. Test NGINX configuration to make sure you didn’t make any typos
    nginx -t

  4. Reload NGINX configuration
    nginx -s reload

4 Likes