Space after video on mobile devices

Hi, I am using InstaBuilder 2.0 and on every single one of my landing pages I can see blank space after the video (on mobile devices). The best InstaBuilder programmer spent more than 2 hours on my website trying to fix it but he couldn’t. He finally said that the problem comes from the theme. Now I do not know what else I could do but to write here…

Thanks!

Now I have the same problem on desktop view… It’s very frustrating and no one is helping me. That’s a bit sad.

Hello there,

Could you please post your URL here so I can have a look? If possible, could you please post its screenshot here?

Warmest regards,
Kharis

Hi, Kharis,

Here’s my Website URL: http://www.gpofblank.co.uk/

Yesterday I added “HTML/CSS/JavaScript” iframe (embedded video) instead of the IB feature “Add video”. Now I have the problem only on the mobile version of my site, as before…

Here’s a screenshot: http://www.gpofblank.co.uk/wp-content/uploads/2015/11/Screen-Shot-2015-11-24-at-06.54.44.png

Thanks!

Warmest greetings,

  • GPOB Elvis

Hello there,

Thank you for the link and the screenshot. They helped me a lot.

To fix the issue, could you please try to add the following CSS code?

@media only screen and (max-width: 756px){

  #ib2_el_8xX1y5Ll,
  #ib2_el_8xX1y5Ll > .el-content{
    min-height: auto !important;
    height: auto !important;
  }

}

You can use the Simple Custom CSS plugin.

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Warmest regards,
Kharis

Just tried it. It didn’t work.

Btw, when I turn the phone (landscape view) the space disappears. I can only see the space on the regular (normal) phone view. Tablet version is OK. Desktop Version is OK.

Hello there,

Thank you for reporting.

I noticed that the ID selector changed. Could you please add the following CSS code?

@media only screen and (max-width: 756px){

  .ib2-content-el,
  .ib2-content-el > .el-content{
    min-height: auto !important;
    height: auto !important;
  }
  
}  

If it didn’t help, can you add custom CSS class name to the video element section?

Then adjust the CSS code above into the following.

@media only screen and (max-width: 756px){

  .your_class_name,
  .your_class_name > .el-content{
    min-height: auto !important;
    height: auto !important;
  }
  
}  

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Warmest regards,
Kharis

I will try.

It’s working on the IB simulator (phone view) but on the actual phone screen the space is still there (tested with 2 phones). I cleared the cache and the space is still there.

However, I’ve never used the third option, cause I do not know how to add “custom CSS class name to the video element section”

Thanks for your efforts, Kharis! I appreciate your work and am grateful.

Hello there,

Thank you for reporting.

Could you please try the following?

@media only screen and (max-width: 756px){

  body div.ib2-content-el.ib2-code-el,
  body div.ib2-content-el.ib2-code-el > .el-content{
    min-height: auto !important;
    height: auto !important;
  }
  
}  

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Warmest regards,
Kharis

Nope. Never mind.

Thanks!