Title: Responsive height
Last modified: February 2, 2018

---

# Responsive height

 *  Resolved [eric3d](https://wordpress.org/support/users/eric3d/)
 * (@eric3d)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/responsive-height-7/)
 * Since CSS height expressed as a percentage is relative to the parent’s height,
   entering a percentage in iPanorama’s height field does not work.
 * The workaround is to use padding-bottom, which is relative to the width of the
   object itself.
 * Workaround #1: Add custom CSS
 *     ```
       #ipnrm-uk9w9-404 { position: relative; height:0; padding-bottom: 75%; }
       #ipnrm-uk9w9-404 .ipnrm { position: absolute; top: 0; left: 0; width: 100%; height:100%; }
       ```
   
 * Since the ID is generated on the fly and never the same twice, it does not work.
   adding a class like “ipnrm-container” to the div would allow me to target it 
   more reliably.
 * Workaround #2: Wrap panorama in another div and add custom CSS
 *     ```
       .responsivepano > div:nth-of-type(2) { position: relative; height:0; padding-bottom: 75%; }
       .responsivepano > div:nth-of-type(2) .ipnrm { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
       ```
   
 * This works, but it’s messy.
 * Preferred method: Add a condition in the plugin code.
    if appData.config.panoramaHeight
   contains “%”: add styles to container div “position: relative; height:0; padding-
   bottom: xyz%;” add styles to content div “position: absolute; top: 0; left: 0;
   width: 100%; height: 100%;”
 * I’ll have to do some more tests to ensure this does not hurt full screen mode.

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Plugin Author [Avirtum](https://wordpress.org/support/users/avirtum/)
 * (@avirtum)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/responsive-height-7/#post-9973679)
 * Hello. You can use the class paramater inside your shortcode like [ipanorama 
   id=”123″ class=”mypanorama”], and then use custom css like
 * .mypanorama {
    width:100%; height:500px; }
 *  Thread Starter [eric3d](https://wordpress.org/support/users/eric3d/)
 * (@eric3d)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/responsive-height-7/#post-9983751)
 * Thanks. That makes it a lot easier to target the correct div.
 * You may still want to adjust how it handles % heights.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Responsive height’ is closed to new replies.

 * ![](https://ps.w.org/ipanorama-360-virtual-tour-builder-lite/assets/icon-256x256.
   png?rev=2139967)
 * [iPanorama 360 - Advanced Virtual Tour Builder](https://wordpress.org/plugins/ipanorama-360-virtual-tour-builder-lite/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/ipanorama-360-virtual-tour-builder-lite/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/ipanorama-360-virtual-tour-builder-lite/)
 * [Active Topics](https://wordpress.org/support/plugin/ipanorama-360-virtual-tour-builder-lite/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/ipanorama-360-virtual-tour-builder-lite/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/ipanorama-360-virtual-tour-builder-lite/reviews/)

 * 2 replies
 * 2 participants
 * Last reply from: [eric3d](https://wordpress.org/support/users/eric3d/)
 * Last activity: [8 years, 3 months ago](https://wordpress.org/support/topic/responsive-height-7/#post-9983751)
 * Status: resolved