Custom CSS
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 flickerWe 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