Space after video on mobile devices


#1

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!


#2

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


#3

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


#4

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

#5

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


#6

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.


#7

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


#8

I will try.


#9

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.


#10

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


#11

Nope. Never mind.

Thanks!