Feature request: making notation responsive

To make the SVG responsive, I changed this:

<div id="abc-paper-58ef388cf2a5c" class="abc-paper" style="width: 770px; overflow: hidden; height: 366.467px;">
<svg height="366.467" version="1.1" width="770" xmlns="https://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.666656px; top: -0.5px;">

To this:

<div id="abc-paper-58ebdcf2f347b" class="abc-paper svg-container">
<svg viewBox="0 0 770 366" preserveAspectRatio="xMinYMin meet" class="svg-content">

And added the CSS:

<style>
.svg-container { 
	display: inline-block;
	position: relative;
	width: 100%;
	padding-bottom: 100%; 
	vertical-align: middle; 
	overflow: hidden; 
}

.svg-content { 
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
}
</style>

• This reply was modified 7 years, 11 months ago by iantresman.