Docs

[president75]

Hello,

I created several Modal Popup with Convertplug. Unfortunately in notebook videos are not responsive.

Can you help me!?

Here is the video page:

http://www.home4life.it/demo-home/

Click on the slider “DA VEDERE” and then on the dot “CALASCIO” as shown in the screen attached.

Thank you

[Nabeel A]

Hi there,

Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.cp-overlay.cp-open .cp-modal {
    width: 100% !important;
    max-width: 93% !important;
}

Let us know how this goes!

[president75]

I added the command but now the video on your desktop PC does not look good.
Check it out yourself.
Instead the notebook is fine the length but not the height.

[Rupok]

Hi there,

Thanks for updating. In that case you can write the code for a specific range of screen size> Let’s update the code a bit :

@media only screen and (min-width: 980px) and (max-width: 1333px) {
.cp-overlay.cp-open .cp-modal {
    width: 100% !important;
    max-width: 93% !important;
}
}

Let’s change the min-width and max-width value to your desired screen size as I am not sure which screen size you are referring as “notebook”.

Hope this makes sense.

Cheers!

[president75]

The time now is much better. But the video on the notebook will not enter the screen you have to scroll down to see it all.
How can we do to show it on the page without scrolling !?

Thank you. You are always very kind

[Joao]

Hi There,

Try updating your code above provided for:

@media only screen and (min-width: 980px) and (max-width: 1333px) {
.cp-overlay.cp-open .cp-modal {
    width: 100% !important;
    max-width: 93% !important;
    top: 0;
}
}

Hope that helps,

Joao

[president75]

I changed the code but unfortunately the problem remains. To see the video on the notebook you have to scroll.

🙁

[Rupok]

Hi there,

As mentioned earlier, I am not sure what you are referring as “notebook” and what’s the resolution. Usually Notebook PC should have 1333×768 or 1024×768 resolution and I suggested fix for that. If you are referring other resolution then mention that clearly. You can also create another instance of media query to set different width for another screen range.

Hope this makes sense.

Cheers!

[president75]

My notebook has a resolution of 1366×768.

[Rue Nel]

Hello There,

Could you please send us a screenshot with the video in it? I have tried checking out your site and this is what I got;

Hope this helps. Kindly let us know.

[president75]

Here’s how I see it.

[Rad]

Hi there,

I see, it’s bigger than your screen.

How about making it smaller like this,

@media only screen and (min-width: 980px) and (max-width: 1366px) {
.cp-overlay.cp-open .cp-modal {
    width: 100% !important;
    max-width: 83% !important;
    top: 50%;
}
}

And please provide your Admin login credentials so we could try the CSS directly.

Thanks!

[president75]

This reply has been marked as private.

[Rad]

Hi there,

Please try this one,

@media only screen and (min-width: 980px) and (max-width: 1366px) {
.cp-overlay.cp-open .cp-modal {
    width: 100% !important;
    max-width: 83% !important;
}
.cp-modal-popup-container .col-md-12 {
height: 70% !important;
}
.cp-modal-popup-container .col-md-12 iframe {
height: 100% !important;
}
}

The problem with the device that has 1366px is I can’t properly use the debugging tools. The screen becomes narrow when comparing while editing. It’s working okay, but the popup only base its dimension on your content that’s why it appears bigger.

Thanks!

[Author]

Posts