Median.co HomeDeveloper PortalCreate New App
Documentation
Online TermsPrivacy Policy

Custom CSS

Suggest Edits

Overview

Custom CSS lets you modify the appearance of your website when it’s displayed inside your Median-powered mobile app. Use it to hide unnecessary elements - like footer menus or chat widgets - or adapt styling for smaller screens. CSS rules apply globally across both iOS and Android platforms when configured in the app.

Custom CSS in Median Apps

Apply Global CSS Rules

To override default styles, insert your CSS into the configuration panel. For example, the snippet below modifies navigation and footer elements on all pages:

.nav
{ 
  margin-top: 5px !important;
  font-size: 14px !important;
}

#header, #footer
{ 
  background-color: #4c4c4c !important;
  margin-bottom: 0px !important; 
}

❗️

Use !important to prevent flicker

We recommend using the !important flag as shown in the above examples to prevent flicker. !important ensures your app's custom CSS rules always takes priority and override any other CSS rules on your website or external files which may load and be processed subsequently.

Apply Conditional CSS Using JavaScript

As an alternative to hardcoded CSS overrides, you can apply CSS dynamically using JavaScript. This is especially useful if your design changes frequently or you need conditional logic. Here’s how to do it:

<script>
  if (navigator.userAgent.indexOf('median') > -1) {
    document.querySelector('.nav').style.visibility = "hidden";
    document.querySelector('#header').style.visibility = "hidden";
    document.querySelector('#footer').style.visibility = "hidden";

    // Or with jQuery
    $('.nav').hide();
    $('#header').hide();
    $('#footer').hide();

    // WordPress can use the jQuery() function rather than $()
    jQuery('.nav').hide();
    jQuery('#header').hide();
    jQuery('#footer').hide();
  }
</script>

Tip: On WordPress, use a plugin like Insert Headers and Footers to safely add this script to your site header.

Advanced: Server-Side CSS Based on User Agent

You can also serve alternate CSS files from your backend based on whether the request comes from your mobile app. This approach gives you full control and allows for scalable styling changes without republishing your app.

Learn how to detect Median app requests using a Custom User Agent.

Additional Resources


Updated 19 days ago

Next Steps