Hustle Pop-up is not responsive on mobile

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, 3 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

Here’s what I got: https://image.ibb.co/nPiDfp/image.png

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