Title: Feature request: making notation responsive
Last modified: April 10, 2017

---

# Feature request: making notation responsive

 *  [iantresman](https://wordpress.org/support/users/iantresman/)
 * (@iantresman)
 * [9 years ago](https://wordpress.org/support/topic/feature-request-making-notation-responsive/)
 * It would be very useful if the SVG produced was optionally responsive. For details
   see this example: “[Make SVG Responsive](http://thenewcode.com/744/Make-SVG-Responsive)“

Viewing 1 replies (of 1 total)

 *  Thread Starter [iantresman](https://wordpress.org/support/users/iantresman/)
 * (@iantresman)
 * [9 years ago](https://wordpress.org/support/topic/feature-request-making-notation-responsive/#post-9026105)
 * 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="http://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 9 years ago by [iantresman](https://wordpress.org/support/users/iantresman/).

Viewing 1 replies (of 1 total)

The topic ‘Feature request: making notation responsive’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/abc-notation_f0e7c0.svg)
 * [ABC Notation](https://wordpress.org/plugins/abc-notation/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/abc-notation/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/abc-notation/)
 * [Active Topics](https://wordpress.org/support/plugin/abc-notation/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/abc-notation/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/abc-notation/reviews/)

## Tags

 * [svg](https://wordpress.org/support/topic-tag/svg/)

 * 1 reply
 * 1 participant
 * Last reply from: [iantresman](https://wordpress.org/support/users/iantresman/)
 * Last activity: [9 years ago](https://wordpress.org/support/topic/feature-request-making-notation-responsive/#post-9026105)
 * Status: not resolved