I cannot figure out how to reduce the view of a form on a mobile device/iPhone. It does reduce, but not enough:
https://www.katyinsurancesolutions.com/qquote.html
Thanks for any help, Blake
mobile view typecrafters form
(23 posts) (3 voices)-
mandarin
offlineMemberI cannot figure out how to reduce the view of a form on a mobile device/iPhone. It does reduce, but not enough:<br />
https://www.katyinsurancesolutions.com/qquote.html<br />
Thanks for any help, BlakeWorks fine on my iPad running latest ios and fine also on my Android handset. No problem with size on either.
Posted 2 months ago -
Sinclair
offlineMemberYou could maybe try introducing this at the bottom of your custom stylesheet (or stylesheet of your choosing).......
@media only screen and (min-width: 0px) and (max-width: 700px) {
.p7OPM-04.opm-phone .opm-panel-content {
padding: 20px 4px;
}
}HTH
Posted 2 months ago -
Sinclair, you are definitely on the right track. The problem only occurs, once you place the cursor in a field. Then the screen expands.
I tweaked the padding to observe adjustments. Definitely the right area, but once cursor/focus occurs, the field expands, grows larger.Posted 2 months ago -
Sinclair
offlineMemberI don't know I'm afraid, maybe the form's author can help?
Posted 2 months ago -
Sinclair
offlineMemberJust out of interest could you take a screenshot of the device displaying this issue post an url to it and tell us what device it is, OS and browser used, whether you've used portrait or landscape orientation and so on. I don't have a mobile to check with but use Firefox's responsive webdev tools to check how things will look in a variety of devices, I don't see the issue you describe and this tool is usually pretty good as far as I'm aware!
Posted 2 months ago -
https://www.katyinsurancesolutions.com/p7typecrafters/img/onpage.PNG
Is what it looks like on iPhone once the form on https://www.katyinsurancesolutions.com/qquote.html
loads.https://www.katyinsurancesolutions.com/p7typecrafters/img/onpagefocus.jpg
Is what it looks like once focus is in on a field. It gets enlarged.
Once the focus is on a field, I can reduce it, but it is a pain.Thanks for any ideas.
Posted 2 months ago -
Sinclair
offlineMemberI wonder if you find the hmy-content div in which the OPM resides and apply a class of mypad to it, then in the OPM stylesheet where you placed my previous suggestion, you add this....
@media only screen and (min-width: 0px) and (max-width: 700px) {
.my-pad {padding-left:0 !important; padding-right:0 !important;}
}...perhaps that'll do it, it's hard for me to tell cos I don't see the issue!
HTH
Posted 2 months ago -
Sinclair
offlineMemberBlake, you've applied the my-pad class to the hmy-content-wrapper div, try applying it directly to the hmy-content div instead instead.
HTH
Posted 2 months ago -
Sinclair
offlineMemberOr... leave the markup as it is (applied via the HMY interface?) and change the media query to....
@media only screen and (min-width: 0px) and (max-width: 700px) {
.my-pad .hmy-content {padding-left:0 !important; padding-right:0 !important;}
}HTH
Posted 2 months ago -
I left the markup alone & used the new media query. Still no luck.
I may move on to separate pages for the 4 forms or APM4.
I have had success w/forms & APM4 - https://www.hisot.com/contact.html?ap4=1_2
Too bad tho, OPM & forms would seem to be a great combo. Or they are a great combo except for me-)Posted 2 months ago -
Sinclair
offlineMemberI don't know tbh, have you tried flushing your cache, maybe several times?
I have a horrible feeling we'll kick ourselves when/if we find the culprit!
Posted 2 months ago -
Yes, I flush clear iPhone History. I did change OPM Enable Phone Conversion.
I had it enabled. Now not enabled. Once focus is on a field, it still enlarges, but it is easier to decrease the view & see what the label of the field is. The downside to disabling the, Enable Phone Conversion, is the menu labels are no longer stacked vertical.
I did the same w/my other OPM, https://www.katyinsurancesolutions.com/moreinfo.html
I took out the my-pad markup.
This might be an acceptable trade off.Posted 2 months ago -
Sinclair
offlineMemberSo, I revisited this and see a difference in the rendering of the page depending on which opm panel is triggered, it may be an overflow issue!
If you go into the markup and find this.......
<div id="p7HMY_3" cl....... at/around line #120
Immediately below that you'll find the hmy-section div and below that, the hmy-content-wrapper div, apply a class of hmy-overflow to both of these
Now, go to line #140 and apply the hmy-overflow class to it's hmy-section and hmy-content-wrapper divs.
In your 7HMY-01 or custom stylesheet (outwith any media query), paste this.....
.hmy-overflow {overflow:hidden;}
HTH
BTW: in an up to date hmy, overflow-hidden is an option within the UI and the updated stylesheet has the requisite CSS to match!
Posted 1 month ago -
Sinclair
offlineMemberOh drat,
It was a clutching at straws suggestion and I apologise that it didn't yield a positive conclusion.
I'm out of ideas, it's possibly a script/CSS issue from one of the addons, depending on width of browser window switching from the OPM trigger "Reviews" to any other trigger is changing the page layout, 3 columns for all except "Reviews" which renders the page to a 2 column layout!
Sorry once again...
Posted 1 month ago -
In the hope of narrowing the problem, on https://www.katyinsurancesolutions.com/qquote.html
I uninstalled FGM & OPM. Also removed 2 of the 3 forms & have overflow hidden enabled.
Once focus goes to the Form, it still enlarges, but I can finger move the enlarged form better.
I tried enabling, no grow, but it had no affect.Posted 1 month ago -
I think I am done driving myself & others (Sinclair) nutty with my form issues. I have tested the form on numerous emulators & simulators & cannot duplicate the issue I see on my iPhone 6s. Tried different browsers on my iPhone 6s w/the same results. Time to move on.
Posted 4 weeks ago
Reply
You must log in to post.