Hello @kamal91
PopUps are responsive, most probably some other CSS rules coming from theme or other plugins, cause that.
I visited above page, but I couldn’t see any popup window though.
Could you please enable it again so we can inspect it?
Also share with as a screenshot with your design settings. 🙂
Warm regards,
Dimitris
Hi,
You couldn’t see any popup window because you haven’t clicked on the video there on that page, the pop-up only appears when you click on play the video, only then you’ll be able to see it, I wanted it like that.
It’s enabled 🙂
And here’s a screenshot with my design settings: https://pasteboard.co/HxCDuKq.png
When I don’t use the custom size the pop up is responsive on mobile, but it doesn’t show the picture along with it
Hey @kamal91,
Hope you’re well.
Because custom size gives absolute width to pop up, it’s expected to force the same width on mobile too. But I can give you some CSS codes to make it responsive.
When I check your website now it looks like responsive now, so I think you turn off custom size. If you still need a custom size please turn on and let us know. Then I will inspect and share CSS codes with you.
Cheers,
Oguz
Yes, I do need the css to show the image while still having the poo-op responsive on mobile.
And yeah, I did turn off custom size.
-
This reply was modified 6 years, 9 months ago by
kamal91.
Hey @kamal91,
Hope you’re well.
I checked your website and looks like you didn’t activate custom size, still? So I assume you want to keep popup like current status and show image on mobile only. Can you add this custom CSS for that;
.hustle-modal:not(.hustle-modal-image_only) .hustle-modal-image:not(.hustle-modal-image_none).hustle-modal-mobile_hidden{
display:block !important;
}
@media(max-width:768px){
.wph-modal.wph-modal-active{
overflow:scroll;
}
}
You can add them from your wp-admin Appearance > Customize > Additional CSS panel.
Cheers,
Oguz
I just did that, it’s still not responsive, please check it out.
Have you cleared your cash
Hello @kamal91
Hope you’re doing well!
Please try the foloeing CSS code. Add it to Appearance >Customize > Additional CSS
@media screen and (max-width: 992px) {
.hustle-modal-body.hustle-size-small {
width: 30%;
left: 35%;
position: relative;
}
.hustle-modal-close {
position:relative;
right:35%;
}
}
Let us know how it went!
Cheers,
Nastia
Hey Nastia again,
That kinda worked, but it’s missing something, check out these 2 pictures
1- https://pasteboard.co/Hy5n5BQ.png
2- https://pasteboard.co/Hy5on2s.png
Hey @kamal91,
Hope you’re well.
Can you add one more CSS codes? You need to add these ones;
@media screen and (max-width: 992px) {
.hustle-modal-one .hustle-modal-body section{
height: auto !important;
overflow:scroll !important;
}
}
@media screen and (max-height: 510px) {
.wph-modal.wph-modal-active{
overflow:scroll;
}
}
I hope it helps!
Cheers,
Oguz
Thanks man, it’s slighlty better now, but still not satisfied https://pasteboard.co/HygazH9.png
Hello @kamal91
Could you please replace the CSS rules that Nastia shared here, with:
@media screen and (max-width: 992px) {
.hustle-modal-body.hustle-size-small {
position: relative;
width: 40%;
left: 30%;
height: 90vh;
}
.hustle-modal-close {
position:relative;
right:30%;
}
}
Thank you,
Dimitris 🙂
Thank’s
I just did, and here’s what I got https://pasteboard.co/Hyp8ebw.png
My bad, I see the issue now, please replace my snippet with:
@media screen and (max-width: 992px) {
.hustle-modal-body.hustle-size-small {
position: relative;
width: 40%;
left: 30%;
}
.hustle-modal-body.hustle-size-small article {
max-height: 100% !important;
}
.hustle-modal-close {
position:relative;
right:30%;
}
}
Cheers,
Dimitris
Hey @kamal91,
Hope you’re well.
Can you add these custom CSS codes;
.hustle-modal-one .hustle-modal-body{
overflow:scroll !important;
}
.hustle-modal-one .hustle-modal-body section{
height:auto !important;
max-height:none !important;
}
Cheers,
Oguz
