Styling a Micrio embed using CSS Client 4.x ​

CSS variables ​

Micrio 4 uses a set of CSS variables for styling its HTML elements, which are the simplest way of adjusting the way Micrio looks.

You can adjust these variables very easily to tweak the default Micrio look and feel:

Mobile responsiveness ​

There is also a light-weight responsive mode which affects the CSS variables. For screens narrower than 500px, this is the CSS:

@media (max-width: 500px) {
	html {
		--micrio-border-margin: 5px;
		--micrio-button-size: 48px;
	}
}

@media (max-width: 500px) {
	html {
		--micrio-border-margin: 5px;
		--micrio-button-size: 48px;
	}
}

Custom CSS overwrites ​

Of course, since <micr-io> is a simple HTML element, you can use your own CSS to overwrite any of Micrio's styling.