popover not showing correctly on Iphone

My popover is showing correctly on my desktop but not on my iphone. The top of my plugin is being cut off on the iphone where I cant even exit from plugin. I have played with somethings like making width and height auto and down loaded my css plugin and added this "@media screen and (max-width: 767px) {
.visiblebox {height:auto; width:auto;}
}" but still not working.
Help Please. here is a screen shot

  • ROn

    Sorry Vaughan i miss understood you about the auto settings. When I put numbers in the popover margins I a got a doable result on the iphone. problem was it messed up the desktop display so that you couldn't see the submit button on my form. So then I tried the MyCustom CSS but Im not getting any response or movement when I play around with the positioning. Here is what I plugged in
    @media screen and (max-width: 767px) {
    .visiblebox{
    height:auto;
    width:auto;
    position: relative;left:90px;top:10px;}
    }

  • alex_blasingame

    I'm having a similar problem making the popovers responsive. At the bottom of my styles.css if have the following:

    @media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
    	div.visiblebox{max-width:90% !important;max-height:90% !important;top:0 !important;left:0 !important;margin:3% !important;padding:0 !important;}
    	div.visiblebox div#message{max-width:100% !important;}
    	div#popupForm tr#titleRow{height:50px !important;}
    	div#popupForm th#popupTitle {font-size:3em !important;}
    	div#popupForm #mc_embed_signup input#mc-embedded-subscribe{padding:0 3px !important;}
    	#mc_embed_signup .mc-field-group{margin:0 !important;padding:0 !important;}
    	div#popupForm tr.popupCallOutsRow,div#popupForm p#popupNoSpam{display:none !important;visibility:hidden !important;}
    	}
    @media only screen and /*(max-width: 640px) and (max-device-width:640px) and */(orientation: landscape) {
    	div#popupForm tr.popupCallOutsRow,div#popupForm p#popupNoSpam,div#popupForm td.popupPgraph{display:none !important;visibility:hidden !important;}

    This should change the style of the popover on smaller screens and change it's size. It works when I view it using different screen sizes in ProtoFluid, but in practice on my iPhone it doesn't work. Have you guys been working on a mobile optimization scheme for this plugin? I can't really look at the code on my phone, so if there are some inline styles generated by the plugin maybe I could disable them?

  • Jack Kitterhing

    Hi there @alex_blasingame,

    Hope you're well today and thanks for your question.

    We will be working on a more responsive though we don't have an ETA for that.

    If you plug your iPhone into your computer, you can use the developer tools to view the code :slight_smile:

    I don't have a iPhone myself, but the media queries for iPhone sizes, you can find here http://stephen.io/mediaqueries/

    If we can help at all please don't hesitate to ask. :slight_smile:

    Thanks!

    Kind Regards
    Jack.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.