lightbox page pop-up oversized width on mobile devices

Hi,
Thanks for the feedback, I took another look at your contact form popup and see that it is inside a color section which always is given 100% width, since you say that when the popup starts it’s the right size and then when the content loads it increases in size so I removed the color section. Please give that a try.
If that doesn’t work then look for this css in your Quick CSS”

.mfp-iframe-holder .mfp-content {
    width: 50% !important;
    max-width: 960px !important;
    min-height: 51vh;
}

.mfp-iframe-scaler {
    min-height: 51vh;
}

and try with it removed, as a test. and then test with this code as a replacement:

.mfp-iframe-holder .mfp-content {
    width: 50% !important;
    min-height: 51vh;
}

.mfp-iframe-scaler {
    min-height: 51vh;
width: 50vw !important;
}

Sorry, if I had a iPhone I could test it myself.
Please be sure to clear your browser cache and your cache plugin with each test.

Best regards,
Mike

Hi,
Did you try clearing the cache on your iPhone?

Best regards,
Mike

Hi,
I signed up for a trial at browserstack and tested you site, it turns out that the iframe is getting it’s width from the page that is in the iframe which is 1920px
So I added this css to your contact page in a code block:

<style>
.responsive .boxed#top {
max-width: 400px !important; 
width: 400px !important;
}
</style>

and I added this to your Quick CSS, disabling the other css:

.mfp-iframe-scaler iframe.mfp-iframe,.mfp-iframe-scaler iframe,div.mfp-content {
max-width: 400px !important;
}

Please clear your browser cache and check.

Best regards,
Mike

Hi,
I added the style to the page directly because it’s loading in a iframe and some browsers won’t let you apply css to the content of a iframe, I also wanted to see if it worked without fighting with the iframe limitations. So I added a media query to the css and made it a little smaller:

@media only screen and (max-width: 767px) { 
.responsive .boxed#top {
max-width: 350px !important; 
width: 350px !important;
}
}

If this works for you then try moving it to your Quick CSS to see if it still works on the iframe, but we will add the page id to it:

@media only screen and (max-width: 767px) { 
.responsive .boxed#top.page-id-1507 {
max-width: 350px !important; 
width: 350px !important;
}
}

Please feel free to adjust the width, I’m just guessing at 350px from the video.
Also clear your browser cache.

Best regards,
Mike

Hi,
It looks like we are going to have to target iOS only, I know that you can target iPhone with this:

/*iPhone only - ios*/
@supports (-webkit-overflow-scrolling: touch) {
  /* CSS specific to iOS devices */ 
}

But your also looking to control Mac’s which don’t have a touch screen.
This post says you can target iOS only with

-webkit-overflow-scrolling

Perhaps we should try to control it with javascript, such as this post.
Well please let us know how your testing goes tonight.

Best regards,
Mike

Hi,
Great job! Thanks for sharing your solution and I’m glad we could help, a little :)
I assume we can close this now, but feel free to start a new thread if we can assist with anything else.

Best regards,
Mike