|
Ronald Aoki
|
January 17, 2014 at 4:24 am
What’s up, gang?
Has anyone experienced the registration page decreasing in size when attempting to register via an iPhone 4?
The registration page literally shrinks from full screen to half the size upon clicking on the “Register” button. The only way to enlarge the registration page is to pinch and zoom.
I’m baffled. Any thoughts?
Thank you.
|
|
Dean
|
January 17, 2014 at 4:41 am
Hi Ronald,
Have you modified the registration_page_display.php template file?
|
|
Ronald Aoki
|
January 17, 2014 at 2:49 pm
Hi Dean. That is a negative. Did not touch that .php file. Please advise.
|
|
Josh
|
January 17, 2014 at 4:04 pm
Hi Ronald,
It might help to have a link to the registration page so we can take a look. Also, do other pages on the site decrease in size when viewed on an iPhone?
|
|
Ronald Aoki
|
January 17, 2014 at 7:54 pm
Perhaps it has something to do with the theme I’m using, namely Twenty Thirteen?
|
|
Josh
|
January 17, 2014 at 8:32 pm
The theme does control to appearance of all the pages on the front end of the website, so yes the theme definitely has something to do with it.
|
|
Ronald Aoki
|
January 18, 2014 at 12:50 am
Okay, I see. Have you tested on the Twenty Thirteen theme before? Is there any way to prevent that from happening?
|
|
Dean
|
January 20, 2014 at 1:29 am
Hi Ronald,
We use all the default WordPress themes when testing and I havent come across this issue before.
As Josh requested, could we get a link to the site and do other pages on the site decrease in size when viewed on an iPhone?
Also is this issue happening on a normal browser (computer/laptop) or just on a phone?
|
|
Ronald Aoki
|
January 20, 2014 at 2:43 am
Hi, Dean:
Ok.
No, only the registration page right after clicking on the “Register” button. All other pages display fine on my iPhone 4S.
Normal browser is fine. Not sure about on a tablet, but definitely my iPhone 4S shrinks to half its size.
Please advise.
http://dev.hdihawaii.com/
|
|
Tony
|
January 20, 2014 at 5:17 am
Hi Ronald,
Can you disable reCAPTCH and retest please?
|
|
Ronald Aoki
|
January 20, 2014 at 12:15 pm
Hi Tony. Disabled the reCAPTCH and re-tested. The registration description/form page still reduces in size on a iPhone 4S. Please help.
|
|
Dean
|
January 21, 2014 at 1:40 am
Hi Ronald,
This also occurs on Android phones and slightly on small tablets.
It is the social media plugin, I’ll get a ticket raised to resolve it.
If you add the following CSS to your themes style.css file or a plugin like My Custom CSS it should resolve it.
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.facebook-button div span iframe {
min-width: 100px;
max-width: 100px;
}
}
|
|
Ronald Aoki
|
January 21, 2014 at 3:15 am
Hey, Dean, the lifesaver…
Without the reCAPTCHA activated, it works! Added your CSS via My Custom CSS plugin and it worked like a charm. But when the reCAPTCHA is activated, which is a must, a small white column still appears on the right side of the iPhone 4S screen due to the size of the reCAPTCHA box protruding out.
Is there a CSS to fix that too, or can I just adjust the size of the reCAPTCHA box via the General Settings (haven’t had much luck with doing that, actually).
Almost there. Please advise.
P.S. Thanks for raising a ticket. I really appreciate it.
|
|
Dean
|
January 21, 2014 at 5:50 am
Hi,
Modifying the reCaptcha isn’t that easy. It’s not pretty but you could change the above code to this:
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.facebook-button div span iframe {
min-width: 100px;
max-width: 100px;
}
#recaptcha_table, #recaptcha_area, #recaptcha_image {
width: 230px !important;
max-width: 230px !important;
}
}
|
|
Ronald Aoki
|
January 21, 2014 at 2:48 pm
Hello,
Just to clarify, delete the CSS you posted earlier from within the plugin and edit the actual CSS Style in my child theme as per your graphic above?
Thanks.
|
|
Ronald Aoki
|
January 21, 2014 at 4:16 pm
Disregard my previous post.
Problem solved. I did what you said and the new CSS did the trick. The reCAPTCHA is now within the box and the registration description/form page is now full screen on my iPhone 4S.
Thank you, Dean! EE support is the best!
|
|
Ronald Aoki
|
January 21, 2014 at 8:27 pm
Hello,
One more thing. In desktop view, my Terms and Conditions question on the registration page looks squished to the left. Is that how it supposed to display?
It looks fine in the recently fixed iPhone 4S mobile version, however.
Just checking. Please advise.
Thanks.
|
|
Ronald Aoki
|
January 21, 2014 at 9:13 pm
Please disregard my Terms and Conditions question above. Sidney’s CSS from another post solved the issue. Thank you.
<pre class=”brush: css; gutter: true; first-line: 1; highlight: []; html-script: false”>.event_espresso_form_wrapper div.single-radio label {
width: inherit;
}
.event_espresso_form_wrapper div.multi-checkbox label {
width: inherit;
}
|
|
Ronald Aoki
|
January 21, 2014 at 9:16 pm
Sorry, this is the correct CSS:
.event_espresso_form_wrapper div.single-radio label {
width: inherit;
}
.event_espresso_form_wrapper div.multi-checkbox label {
width: inherit;
}
Having problems wrapping it in the correct language.
|
|
Tony
|
January 22, 2014 at 4:55 am
Hi Ronald,
Just to confirm, is the issue now resolved?
|
|
Ronald Aoki
|
January 22, 2014 at 12:16 pm
Yes, it is and just marked it as such. Thank you.
|
|
Ronald Aoki
|
January 26, 2014 at 2:27 am
Hey Dean,
I just noticed that while we were able to fix the re-sizing of the registration description page and the reCaptcha box to display correctly on small devices such as an iPhone 4S, which was awesome, I just noticed that the “Add More/Remove Attendees” button is now not displaying properly when viewed via an iPhone.
Please see dev site via iPhone here: http://dev.hdihawaii.com/
Thank you.
|
|
Dean
|
January 27, 2014 at 7:00 am
.add-additional-attendee-lnk {
display:block;
}
That should fix it, sorry about that I thought that that issue had been resolved.
-
This reply was modified 10 years, 2 months ago by
 Dean. Reason: removed line height from code
|
|
Ronald Aoki
|
January 27, 2014 at 7:19 pm
No problem at all. Just saw that the other night. Thank you.
Would this be the fix for the “Remove Attendee Above” button?
.rem-additional-attendee-lnk {
display:block;
Please advise.
}
|
|
Dean
|
January 28, 2014 at 3:05 am
Hi,
Yeas that should work
.rem-additional-attendee-lnk {
display:block;
}
|
|
Ronald Aoki
|
January 28, 2014 at 10:42 am
It didn’t work. Please advise. Thank you.
|
|
Dean
|
January 29, 2014 at 5:33 am
Sorry there was a typo in it
.additional-attendee-lnk {
display:block;
}
|
|
Ronald Aoki
|
January 29, 2014 at 6:45 am
Is that code for the “Remove Attendee Above” button? Please advise.
|
|
Ronald Aoki
|
January 29, 2014 at 9:32 pm
Thanks, Dean. It worked beautifully. Thank you. Case closed.
|
